vue尚品汇商城项目-day03【16.开发Search组件模块中的TypeNav商品分类菜单(过渡动画效果)+17.(优化)针对三级菜单联动进行优化,优化方向为减少查询】

在这里插入图片描述

文章目录

    • 16.开发Search组件模块中的TypeNav商品分类菜单(过渡动画效果)
    • 17.(优化)针对三级菜单联动进行优化,优化方向为减少查询
  • 本人其他相关文章链接

16.开发Search组件模块中的TypeNav商品分类菜单(过渡动画效果)

重难点说明

  1. 组件与vuex交互

  2. 事件控制二三级分类列表的显示与隐藏

  3. 优化高频事件触发处理: 利用lodash进行函数节流处理

  4. 优化减小打包文件: 对lodash库实现按需引入

  5. 解决快速移出后可能显示第一个分类的子分类列表的bug

  6. 优化减少组件对象数量: 使用编程式导航代替声明式导航

  7. 优化事件处理效率: 利用事件委托

  8. 利用标签自定义属性携带动态数据

  9. 控制一级列表的显示与隐藏

  1. 一级列表显示隐藏的过渡效果
  1. 优化请求执行的位置, 减少请求次数
  1. 合并分类query参数与搜索的关键字params参数

要求:Home组件中三级菜单一直显示,而Search组件中初始进来隐藏,当鼠标划入则显示,鼠标移出则隐藏,另外三级菜单要有过渡动画效果。

过渡动画:前提组件|元素务必要有v-if|v-show指令才能进行过渡动画控制。

新增代码如下:Search组件中使用/


TypeNav组件中使用@mouseleave和 @mouseenter对show属性显隐进行控制

--------------------------------------------------------------------------- data() { return { show:true } }, --------------------------------------------------------------------------- //组件挂载完毕 mounted() { //当组件挂载完毕,让show属性变为false //如果不是Home路由组件,将typeNav进行隐藏 if (this.$route.path != "/home") { this.show = false; } }, --------------------------------------------------------------------------- methods: { //当鼠标离开的时候,让商品分类列表进行隐藏 leaveIndex() { this.currentIndex = -1; //判断如果是Search路由组件的时候才会执行 if (this.$route.path != '/home') { this.show = false; } }, //当鼠标移入的时候,让商品分类列表进行展示 enterShow() { if (this.$route.path != '/home') { this.show = true; } } }, --------------------------------------------------------------------------- //过渡动画的样式 //过渡动画开始状态(进入) .sort-enter { height: 0px; } // 过渡动画结束状态(进入) .sort-enter-to { height: 461px; } // 定义动画时间、速率 .sort-enter-active { transition: all 0.5s linear; }

注意點1:问题:Search組件中使用三級联动菜单TypeNav需要引入吗?

答案:不需要,因为三級联动菜单TypeNav是注册的全局组件,可以直接使用。

注意點2:通过show属性控制三级菜单的显隐,设计思路是:初始化show:true -> 通过mounted()钩子函数判断当路由为非home组件时设置show = false,这样当进入Search组件时菜单会默认自动隐藏 -> 定义鼠标划入、离开的函数,进行显隐控制

注意點3:问题:控制划入+划出的@mouseenter和@mouseleave应该放在哪一层上?

答案:也应该放在父层上,还是父类委派操作,同时添加路由路径逻辑判断控制show的属性。

注意點4:问题:v-show属性应该放在哪一层上?

答案:应该放在“全部商品分类”标签的里面元素,而不是放在父类元素。因为如果放在父类元素错误效果是当进入Search组件时整个菜单就完全隐藏后续无法进行显示了。

正确代码请看,请注意v-show所在元素的位置

全部商品分类

正确效果如图

vue尚品汇商城项目-day03【16.开发Search组件模块中的TypeNav商品分类菜单(过渡动画效果)+17.(优化)针对三级菜单联动进行优化,优化方向为减少查询】_第1张图片

错误代码请看,请注意v-show所在元素的位置

全部商品分类

错误效果如图

vue尚品汇商城项目-day03【16.开发Search组件模块中的TypeNav商品分类菜单(过渡动画效果)+17.(优化)针对三级菜单联动进行优化,优化方向为减少查询】_第2张图片

注意點5:使用动画效果,要使用标签/进行包裹,另外配合样式搭配使用


...


//过渡动画的样式
    //过渡动画开始状态(进入)
    .sort-enter {
      height: 0px;
    }
    // 过渡动画结束状态(进入)
    .sort-enter-to {
      height: 461px;
    }
    // 定义动画时间、速率
    .sort-enter-active {
      transition: all 0.5s linear;
    }

17.(优化)针对三级菜单联动进行优化,优化方向为减少查询

消耗资源场景:正常情况下查询list的接口放在TypeNav组件中,这样坏处是进入Home组件会请求一次,当点击跳转Search组件时Home组件销毁然而查询list的接口还会再次执行一次,也就是存在多次查询相同接口的场景。

优化方案:想办法减少或者只执行一次查询到处使用。优化方案把查询list的接口放在App.vue的mounted()方法中,因为App.vue只会执行一次,代码如下

把TypeNav的mounted()中的查询移到App.vue的mounted()中

mounted() {
    //派发一个action||获取商品分类的三级列表的数据
    this.$store.dispatch("getCategoryList")
  }

问题1:能否把查询list接口方法这行放在main.js中,因为main.js也只执行一次。

答案:不能,因为main.js是个js文件,哪怕打印里面的this,控制台会输出underfine,而App.vue中的this指代的是组件实例,而只有组件实例才有$store的属性,所以只能放在App.vue中。

本人其他相关文章链接

1.vue尚品汇商城项目-day03【16.开发Search组件模块中的TypeNav商品分类菜单(过渡动画效果)+17.(优化)针对三级菜单联动进行优化,优化方向为减少查询】
2.vue尚品汇商城项目-day03【18.合并params和query参数(Header组件+TypeNav组件)】
3.vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件)】
4.vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
5.vue尚品汇商城项目-day03【22.开发Floor组件】

你可能感兴趣的:(Vue2专栏,vue尚品汇商城项目,开发Search组件,TypeNav商品分类菜单,过渡动画效果,vue2)