vue尚品汇商城项目-day04【26.排序操作(难点)】

举报
刘大猫 发表于 2024/10/08 21:03:25 2024/10/08
【摘要】 vue尚品汇商城项目-day04【26.排序操作(难点)】

在这里插入图片描述
@[toc]

26.排序操作(难点)

26.1使用阿里的iconfont

  1. 在线地址: https://www.iconfont.cn/
  2. 注册并登陆
  3. 创建一个可以包含需要的所有图标的项目
  4. 搜索图标并添加到购物车
  5. 将购物车中的图标添加到指定项目
  6. 修改图标的名称
  7. 选择Font class的使用方式, 并点击生成在线样式url
  8. 在index页面中引入此图标的在线样式链接: <link rel=“stylesheet” href=“http://at.alicdn.com/t/font_1766283_dobjk7xxze7.css”>
  9. 在组件中使用
    <i class=”iconfont icondown”>可以通过color改变颜色, 通过font-size改变大小

26.2排序操作

排序操作难点:

  • 考虑点1:谁应该有类名class=“active”?

    答案:order为1,综合加类名,order为2,价格加类名。

  • 考虑点2:谁应该有箭头?

​ 答案:谁有类名,谁就有箭头

  • 考虑点3:如何区分是向上↑还是向下↓?

​ 答案:取决于order中是asc还是desc

  • 考虑点4:如何区分当前点击是点的综合还是价格,需要向上向下动态展示?

    答案:添加点击事件,去动态判断设置1、2、asc、desc,并拼接order属性值

代码修改:

public/index.html

<!-- 引入阿里图标库向上向下箭头的样式 -->
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3963551_nocag8pfqor.css">

src/pages/Search/index.vue

<ul class="sui-nav">
      <li :class="{active: isOne}" @click="changeOrder('1')">
                  <a>综合<span v-show="isOne" class="iconfont" :class='{"icon-icon-arrow-top4": isAsc, "icon-icon-arrow-btm4": isDesc}'></span></a>
                </li>
      <li :class="{active: isTwo}" @click="changeOrder('2')">
                  <a>价格<span v-show="isTwo" class="iconfont" :class='{"icon-icon-arrow-top4": isAsc, "icon-icon-arrow-btm4": isDesc}'></span></a>
                </li>
</ul>

methods: {
	//排序的操作
      changeOrder(flag) {
        //flag:用户每一次点击li标签的时候,用于区分是综合(1)还是价格(2)
        //现获取order初始状态【咱们需要通过初始状态去判断接下来做什么】
        let originOrder = this.searchParams.order;
        let oiriginFlag = originOrder.split(":")[0];
        let oiriginSort = originOrder.split(":")[1];
        //新的排序方式
        let newOrder = '';
        //判断的是多次点击的是不是同一个按钮
        if (flag == oiriginFlag) {
          newOrder = `${oiriginFlag}:${oiriginSort == 'asc'? 'desc' : 'asc'}`;
        } else {
          //点击不是同一个按钮
          newOrder = `${flag}:${oiriginSort}`
        }
        //需要给order重新赋值
        this.searchParams.order = newOrder;
        //再次发请求
        this.getData()
      }
}

computed:{
      //判断order属性中是否包含1
      isOne() {
        return this.searchParams.order.indexOf("1") != -1;
      },
      //判断order属性中是否包含2
      isTwo() {
        return this.searchParams.order.indexOf("2") != -1;
      },
      //判断order属性中是否包含asc
      isAsc() {
        return this.searchParams.order.indexOf("asc") != -1;
      },
      //判断order属性中是否包含desc
      isDesc() {
        return this.searchParams.order.indexOf("desc") != -1;
      },
    }

注意点1:li标签谁有class="active"谁就会有颜色。

在这里插入图片描述

<li :class="{active: isOne}">

注意点2:

排序方式 1: 综合、2: 价格、asc: 升序、desc: 降序

示例: “1:desc”

排序目前假设只有【综合、价格】,分asc升序、desc降序,那么总共结果会有4种【1:asc 、1:dexc、2:asc、2:desc】

注意点3:

问题:如何区分用户点击的是“综合”排序还是“价格”排序?

答案:根据order参数中的数字是1(综合)还是2(价格)进行区分。

注意点4:

问题:如何添加类名?

答案:有2种方式,方式1采用标签上直接加判断,方式2采用计算属性返回

方式1采用标签上直接加判断:
<li :class="{active: searchParams.order.indexOf("1") != -1}">
------------------------------------------------------------------------------
方式2采用计算属性返回:
computed:{
      //判断order属性中是否包含1
      isOne() {
        return this.searchParams.order.indexOf("1") != -1;
      }
}

注意点5:箭头采用第三方组件(阿里图标库),练习使用

  • 第一步:百度搜索“阿里图标库”,把搜索想要的图标添加到自己项目中
  • 第二步:点击“在线生成链接”,把url在public/index.html中引入样式
  • 第三步:使用样式,格式为class=“iconfont icon-icon-arrow-top4”,切记前缀一定要写iconfont 才能生效

注意点6:

问题:如何区分是向上↑还是向下↓?

答案:取决于order中是asc还是desc

<span v-show="isOne" class="iconfont" :class='{"icon-icon-arrow-top4": isAsc, "icon-icon-arrow-btm4": isDesc}'></span>

computed:{
      //判断order属性中是否包含asc
      isAsc() {
        return this.searchParams.order.indexOf("asc") != -1;
      },
      //判断order属性中是否包含desc
      isDesc() {
        return this.searchParams.order.indexOf("desc") != -1;
      },
}

注意点7:

问题:如何区分当前点击是点的综合还是价格,需要向上向下动态展示?

答案:定义点击事件

<li :class="{active: isOne}" @click="changeOrder('1')">
<li :class="{active: isTwo}" @click="changeOrder('2')">

//排序的操作
changeOrder(flag) {
        //flag:用户每一次点击li标签的时候,用于区分是综合(1)还是价格(2)
        //现获取order初始状态【咱们需要通过初始状态去判断接下来做什么】
        let originOrder = this.searchParams.order;
        let oiriginFlag = originOrder.split(":")[0];
        let oiriginSort = originOrder.split(":")[1];
        //新的排序方式
        let newOrder = '';
        //判断的是多次点击的是不是同一个按钮
        if (flag == oiriginFlag) {
          newOrder = `${oiriginFlag}:${oiriginSort == 'asc'? 'desc' : 'asc'}`;
        } else {
          //点击不是同一个按钮
          newOrder = `${flag}:${oiriginSort}`
        }
        //需要给order重新赋值
        this.searchParams.order = newOrder;
        //再次发请求
        this.getData()
      }

本人其他相关文章链接

1.vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
2.vue尚品汇商城项目-day04【25.面包屑处理关键字】
3.vue尚品汇商城项目-day04【26.排序操作(难点)】
4.vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
5.vue尚品汇商城项目-day04【28.详情页面Detail】
6.vue尚品汇商城项目-day04【29.加入购物车操作(难点)】

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。