vue商城中商品“筛选器”功能的实现代码

网络编程 2024/11/17 佚名

3 1 2

在使用vue搭建商城项目的时候，要实现一个商品筛选器的功能，在完成之后，再一次被vue的数据驱动的强大感到震撼！

首先，我们来看一下具体的需求吧。你可以先看下面的这两张图，然后再看文字描述，可能会更容易理解。

没有触发时的状态

触发后的状态

       我们需求有下面几点：
       1、默认情况下，只显示一级菜单，二级菜单不显
       2、存在二级菜单的情况下，在二级菜单没有显示的情况下，点击一级菜单，一级菜单的样式发生改变，二级菜单不显示
       3、存在二级菜单的情况下，一级菜单已经点击过之后，再点击一级菜单，会显示二级菜单
       我们举例子说明一下，当前的一级菜单有默认、有货优先、直营优先，只有默认是含有二级菜单的，比如现在焦点在有货优先上面，那么我们点击默认的时候，不会弹出默认下面的二级菜单，只会改变一级菜单默认的样式（字体和三角形的颜色），当再次点击一级菜单默认的时候，其下面的二级菜单就显示出来了。
       需求分析完成后，我们开始编写代码吧。

一、创建筛选器数据结构

跟以前的开发方式不同，我们首先要创建数据结构，而不是编写模版代码。

1、设置筛选器数据结构

// 数据源
optionsDatas: [
 {
  id: '1',
  name: '默认',
  subs: [
  {
   id: '1',
   name: '默认',
  },
  {
   id: '1-2',
   name: '价格由高到低',
  },
  {
   id: '1-3',
   name: '销量由高到低',
  },
  ]
 },
 {
  id: '2',
  name: '有货优先',
  subs: []
 },
 {
  id: '3',
  name: '直营优先',
  subs: []
 }
]

这个数据结构设计得是非常出彩的，此处您可能还看不到，在下面具体的应用中你就能感觉到它的优美呢。

2、设置二级菜单（选中项subs）的数据结构

// 选中的筛选项
selectOption: {},
// 是否展开子筛选项
sShowSubContent: false
 当然，我们要在created钩子函数中对selecOption进行赋值操作，保证其具有初始值。

created: function () {
 // 设置初始选中项
 this.selectOption = this.optionsDatas[0];
}

二、设置模版代码

下面是完整模版代码，内容相对比较多，我们按照功能逐块进行讲解吧。

<div class="goods-options z-index-2">
 <ul class="goods-options-list">
  <li class="goods-options-item" v-for="(item, index) in optionsDatas" :key="index">
  <a class="goods-options-item-content" @click="onOptionsItemClick(item, index)">
   <span class="goods-options-item-content-name" :class="{'goods-options-item-content-name-active' : selectOption.id === item.id}">{{item.name}}</span>
   <span class="goods-options-item-content-caret caret" v-if="item.subs.length > 0"
   :class="[isShowSubContent && selectOption.id === item.id " 
   ></span>
  </a>
  </li>
 </ul>
 <transition name="fold-height">
  <div class="options-sub-content z-index-2" v-show="isShowSubContent">
  <ul class="options-sub-content-list">
   <li class="options-sub-content-list-item" v-for="(item, index) in selectOption.subs" :key="index" @click="onSubOptionsItemClick(item, index)">
   <a class="options-sub-content-list-item-content">
    <span class="options-sub-content-list-item-content-name" :class="{'options-sub-content-list-item-content-name-active' : selectOption.id === item.id}">{{item.name}}</span>
    <img class="options-sub-content-list-item-content-select" v-show="selectOption.id === item.id" src="/UploadFiles/2021-04-02/options-select.svg">

1.1、一级菜单的样式变化
       一级菜单的文字颜色的变化需要满足下面的规则，也就是selectOption.id === item.id。也就是说在当选中是一级菜单是默认的时候，我们就要其文字颜色改编成红色。

:class="{'goods-options-item-content-name-active' : selectOption.id === item.id}"

       相应地，三角形的颜色和箭头的朝向也需要进行更改。更改的逻辑如下。当然，如果一级菜单没有对应的二级菜单时，三角形就不应该显示。

:class="[isShowSubContent && selectOption.id === item.id "

v-if="item.subs.length > 0"

1.2、一级菜单的点击事件onOptionsItemClick(item, index)实现的主要功能是改变一次菜单的样式和二级菜单的显示/隐藏。具体的功能如下分析所示：

       1、如果子选项视图处于展开状态，则关闭掉子选项视图

       2、展示子选项视图

              2.1、选中项包含子选项

              2.2、当前筛选项处于选中状态

       3、设置选中项为用户点击的选项


onOptionsItemClick: function (item, index) {
 // 如果子选项视图处于展开状态，则关闭掉子选项视图
 if (this.isShowSubContent) {
  this.isShowSubContent = false;
  return;
 }
 // 1、选中项包含子选项
 // 2、当前筛选项处于选中状态
 // 展示子选项视图
 if (item.subs.length > 0 && this.selectOption.id === item.id) {
  this.isShowSubContent = true;
 } 
  // 设置选中项为用户点击的选项
 this.selectOption = item;
}


2、渲染二级菜单


<transition name="fold-height">
 <div class="options-sub-content z-index-2" v-show="isShowSubContent">
  <ul class="options-sub-content-list">
  <li class="options-sub-content-list-item" v-for="(item, index) in selectOption.subs" :key="index" @click="onSubOptionsItemClick(item, index)">
   <a class="options-sub-content-list-item-content">
   <span class="options-sub-content-list-item-content-name" :class="{'options-sub-content-list-item-content-name-active' : selectOption.id === item.id}">{{item.name}}</span>
   <img class="options-sub-content-list-item-content-select" v-show="selectOption.id === item.id" src="/UploadFiles/2021-04-02/options-select.svg">

2.1、二级菜单样式的变化

       二级菜单的样式变化需要满足下面的规则。这个规则基本上跟一级菜单的一致。

:class="{'options-sub-content-list-item-content-name-active' : selectOption.id === item.id}"

       对于右侧的对勾，需要符合下面的逻辑。
v-show="selectOption.id === item.id" 
2.2、二级菜单的点击事件onSubOptionsItemClick(item, index)，这个事件需要实现功能如下：

       1、设置选中项为用户点击的选项

       2、将选中项置顶

       3、关闭子选项视图


onSubOptionsItemClick: function (subItem, index) { 
 // 遍历所有的可选项，将选中项置顶
 this.optionsDatas.forEach(options => {
  options.subs.forEach (subOptions => {
  if (subOptions.id === subItem.id) {
   options.id = subOptions.id;
   options.name = subOptions.name;
   }
  })
 });
 // 关闭子选项视图
 this.isShowSubContent = false;
}


2.3、二级菜单动画的实现

       二级菜单动画的实现，我们采用了vue的过度动画。其使用到的css动画如下：


/**
 子选项内容区展开动画，当 v-if=“true” 的时候调用
 当子选项部分展开时，初始状态max-height为0，结束状态max-height为180
*/
 .fold-height-enter-active {
 animation-duration: .3s;
 animation-name: fold-height-open;
 }

 @keyframes fold-height-open {
  0% {
  max-height: 0;
  }
  100% {
  max-height: px2rem(180);
  }
 }
/**
 子选项内容区关闭动画，当 v-if=false 的时候调用
 当子选项部分关闭时，初始状态max-height为180，结束状态max-height为0
*/
 .fold-height-leave-active {
  animation-duration: .3s;
  animation-name: fold-height-close;
 }

 @keyframes fold-height-close {
  0% {
  max-height: px2rem(180);
  }
  100% {
  max-height: 0;
  }
 }


2、遮罩的显示/隐藏
       最后就剩下一个遮罩的样式和逻辑了，这个比较简单，其逻辑如下：此处不在进行多余的解释。


<div class="cover" v-show="isShowSubContent" @click="isShowSubContent = false">
</div>


       至此，我们所有的逻辑分析和代码实现都已完成。设计的最巧妙的就是这个数据结构，完全满足了我们业务需求。在下面是完整的代码，希望对您有用。


<template>
 <div class="goods-options z-index-2">
 <ul class="goods-options-list">
  <li class="goods-options-item" v-for="(item, index) in optionsDatas" :key="index">
  <a class="goods-options-item-content" @click="onOptionsItemClick(item, index)">
   <span class="goods-options-item-content-name" :class="{'goods-options-item-content-name-active' : selectOption.id === item.id}">{{item.name}}</span>
   <span class="goods-options-item-content-caret caret" v-if="item.subs.length > 0"
   :class="[isShowSubContent && selectOption.id === item.id " 
   ></span>
  </a>
  </li>
 </ul>
 <transition name="fold-height">
  <div class="options-sub-content z-index-2" v-show="isShowSubContent">
  <ul class="options-sub-content-list">
   <li class="options-sub-content-list-item" v-for="(item, index) in selectOption.subs" :key="index" @click="onSubOptionsItemClick(item, index)">
   <a class="options-sub-content-list-item-content">
    <span class="options-sub-content-list-item-content-name" :class="{'options-sub-content-list-item-content-name-active' : selectOption.id === item.id}">{{item.name}}</span>
    <img class="options-sub-content-list-item-content-select" v-show="selectOption.id === item.id" src="/UploadFiles/2021-04-02/options-select.svg">

总结

                                
                                
                                    vue商城商品筛选器,vue,商品筛选器 
                                风云阁资源网 Design By www.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

风云阁资源网 Design By www.bgabc.com

评论“vue商城中商品“筛选器”功能的实现代码”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

vue商城中商品“筛选器”功能的实现代码

微信小程序用户盒子、宫格列表的实现

vue实现购物车列表

评论“vue商城中商品“筛选器”功能的实现代码”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接