1.一级分类添加背景颜色
第一种:采用样式完成
.item:hover {
background-color: skyblue;
第二种:采用js完成
待定
2.js控制二三级分类的显示与隐藏
1.最开始通过css的display:显示与隐藏
// &:hover {
// .item-list {
// display: block;
// }
// }
2.通过js控制
data() {
return {
//存储用户鼠标移动哪一个位置
currentIndex:-2
}
},
methods:{
// 鼠标进入修改响应式curentIndex属性
changeIndex(index){
//index,鼠标移动到某一个一级分类
this.currentIndex = index;
}
}
3.卡顿现象
正常情况:用户慢慢的操作,鼠标进入,每一个一级分类都会触发鼠标进入事件
非正常情况:用户的操作很快,本身所有的以及分类都应该触发,但实际操作只有部分触发
由于用户的行为过快,导致浏览器反应不过来,如果当前的回调函数中有很多的业务,有可能出现卡顿现象
3.1函数防抖
前面的所有的触发都被取消,最后一次执行在规定的时间之后才能触发
简单来说:如果快速触发,只会触发一次
3.2函数节流
在规定的间隔时间范围内不会重复触发回调,只有大于这个时间间隔才能触发回调,把频繁触发变为少量触发
3.3lodash插件
里面封装了函数的 防抖和节流的业务【闭包和延迟器】
lodash函数对外暴露_函数
//防抖
官网—》》函数–》》debounce—》》func,wait,option
let result = _.debounce(function(){
console.log("我在一秒后执行一次");
},1000);
result();
//节流
官网—》》函数—》》throttle–》》wait,option
button.οnclick= _.throttle(function(){
console.log("我在一秒只能执行一次");
},1000);
result();
4.三级联动节流
// 这种引入的方式,是把lodash全部的功能函数引入
// import _ from ‘lodash’;
// 最好的方式,按需引入
import throttle from “lodash/lodash”
methods:{
// 鼠标进入修改响应式curentIndex属性
// changeIndex(index){
// //index,鼠标移动到某一个一级分类
// this.currentIndex = index;
// } es6
changeIndex:throttle(function(index){
//index,鼠标移动到某一个一级分类
this.currentIndex = index;
},50)
// es5
}
5.三级联动组件的路由跳转和传递参数
三级联动用户点击:一级分类、二级分类、三级分类
当点击的时候,会从home模块跳转到search模块,一级会把用户选中的产品(产品的名、产品的id)在路由的跳转的时候,进行传递。
路由跳转:
声明式导航:router-link
编程式导航:push | replace
三级联动:如果使用声明式导航router-link,可以实现路由的跳转与传递参数。
但是需要注意:出现卡顿现象
router-link:当服务器的数据返回之后,选混出很多的router-link组件,
创建组件实例的时候,一般创建1000+很好内存的,因此出现了卡顿现象。
<a @click=“goSearch” href=“”>{{ c1.categoryName }}
goSearch(){
// 进行路由跳转的方法
this.$router.push(‘/search’);
}
方法二:
goSearch(event) {
// 进行路由跳转的方法
// this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …转 this.router.push(location);
}
},
{{ c1.categoryName }}