目录
1-二三级联动的显示和隐藏(JS控制)
目前系统的二三级分类是通过样式来实现的。原始代码:
我们现在需要通过JS来控制显示和隐藏:给div添加一个动态样式;
<div class="item-list clearfix" :style="{display:currentIdx==index?'block':'none'}">
2-卡顿现象
如果用户操作过快,每一次的操作都会调用函数(函数内部可能有计算等等其他逻辑)会导致浏览器解析不过来,出现所谓的卡顿现象...
所以在项目中药进行节流和防抖处理....
防抖:前面所有的触发都被取消,最后一次执行在规定的时间之后触发,只会执行一次....
节流:在规定的时间间隔范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变更为少量触发....
已经有封装好的组件
Lodash 简介 | Lodash 中文文档 | Lodash 中文网
用户滑动三级分类过快,这里添加了lodash节流函数throttle函数
ps:throttle的回调函数这里不能使用箭头函数,可能会出现上下文this问题
3-三级联动路由跳转
用户点击一级,二级,三级分类,会从home跳转到search模块,会把对应的分类id和分类名称传递过去...
点击一级分类,传递一级分类id和一级分类名称;
点击二级分类,传递二级分类id和二级分类名称;
点击二级分类,传递三级分类id和三级分类名称;
声明式导航使用router-link ,由于router-link是一个组件,当鼠标移动过快的时候,因为是组件而且是循环(组件需要创建实例等等,很耗时间和内存的),所以出现了卡顿现象...因此我们这里采用编程式导航...
最好的解决方式:编程式导航+事件委派
利用事件委派存在以下问题:
问题1-事件委派:是把全部子节点【比如h3,dt,dl,dm】的事件委派给父节点,我们的需求的点击a标签才跳转,如何确定点击的是a标签呢?
问题1的解决方式,利用自定义属性,给a标签自定义属性,其他标签肯定没有这个属性;比如定义data-categoryName
问题2-即使您能确定是a标签,如何确定和区分是一级分类,二级分类,三级分类的a标签呢?
问题2的解决方式,再给a标签自定义一个属性data-category1Id;
注意:自定义属性后通过event.target.dataset可以拿到自定义属性和属性值,但是我们定义data-categoryName是这样,拿到的值是categoryname(浏览器自动帮我们转小写了)