当前位置:网站首页>尚硅谷尚品项目汇笔记(三)
尚硅谷尚品项目汇笔记(三)
2022-08-02 15:54:00 【The..Fuir】
(1)完成一级分类动态添加背景颜色
第一种解决方案:采用样式完成(可以的)
.item:hover{
background:skyblue;
}
第二种解决方案:通过Js完成
(2)通过JS控制二三级商品分类的显示与隐藏
最开始的时候,是通过css样式display: block|none 显示与隐藏二三级商品分类
(3)演示卡顿现象
正常:事件触发非常频繁,而且每一次的触发,回调函数都要去执行(如果事件很短,而回调函数内部有计算,那么可能出现浏览器卡顿)
节流:在规定的间隔时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,吧频繁触发变为少量触发
防抖:前面的所有的触发都被取消,最后一次执行在规定的时间后才会触发,只会执行一次
//lodash插件:里面封装函数的防抖与节流的业务【闭包+延时器】
npm i --save lodash
(6)三级联动组件的路由跳转与传递参数
三级联动用户可以点击的:一级分类、二级分类、三级分类,当你点击的时候
Home模块跳转到Search模块,一级会把用户选中的产品(产品的名字、产品的ID),再路由跳转的时候进行传递
路由跳转:
声明式导航:router-link
编程式导航:push|replace
三级联动:如果使用声明式导航router-link,可以实现路由的跳转与传递参数
但需要注意的,会出现卡顿现象。
router-link: 可是一个组件啊,当服务器的数据返回之后,循环出很多的router-link组件【创建组件实例的循环】 中间过程还要把虚拟dom转换为真实dom
再创建组件实例的时候,一瞬间创建很多组件实例,很耗内存,因此出现了卡顿现象。
7.完成三级联动路由跳转与传递参数
this.$router.push({name:"search",query:{categoryName:'xxx',2id:'xxx'}})
边栏推荐
猜你喜欢
随机推荐
怒写400篇AI文章!这群妹子卷疯了…
AI+BI+可视化,Sugar BI架构深度剖析
关于小程序TabBar跳转页面跟TabBar标签栏的icon不对应的分析(debug)
【[NOI2001] 炮兵阵地】【状压DP】
亏损扩大/毛利偏低,北斗智联与「智能座舱第一阵营」的不等号
先睹为快!界面控件DevExpress WPF这些功能即将发布
【Codeforces Round #811 (Div. 3)】【题目解析+AK代码】
synchronized已经不在臃肿了,放下对他的成见之初识轻量级锁
05-读写锁、阻塞队列及四组API、同步队列
互联网刚需岗位 前景一片大好?
JZ81 调整数组顺序使奇数位于偶数前面(二)-相对位置变化
机械臂速成小指南(十八):圆弧规划
我的创作纪念日
一文搞懂│php 中的 DI 依赖注入
不平衡之钥: 重加权法知几何
研发了 5 年的时序数据库,到底要解决什么问题?
软件测试面试中90%会遇到的问题:“你会搭建测试环境吗?”
亲戚3.5W入职华为后,我也选择了转行……
每日练习------定义一个N*N二维数组,从键盘上输入值,找出每行中最大值组成一个一维数组并输出;
mysql 《一》触发器