搜索版块
2021-04-02 10:15:16 34 举报AI智能生成
搜索版块
作者其他创作
大纲/内容
1. 静态页面
结构
样式
2. 动态数据注入
1. 配置全局状态
2. 请求和渲染数据
3. 用户交互
1. 滚动公式计算
需求
1. 左边一级分类和右边二级分类形成联动
2. 当滑动右侧分类列表时, 更新左侧分类选中
3. 点击左侧一级分类项时, 右侧列表滑动到对应位置
技术点
1. current类
标识当前左侧被选中的项
2. currentIndex属性
用于动态决定左侧哪个选项被选中
计算数据
右侧每个分类顶部所在的位置
rightLiTops 数组
第一次加载完成后, 不再变化
右侧滑动的Y轴坐标
scrollY 属性
滑动过程中动态的变化
2. 实现左右两边列表的滑动
1. better-scroll
1. 安装
npm install better-scroll --save
2. 引入并初始化
import BScroll from 'better-scroll'
watch: {
searchgoods(){
this.$nextTick(()=>{ // 数据更新显示后执行
new BScroll('.menu-wrapper')
new BScroll('.shops-wrapper')
})
}
}
3. 注意事项
better-scroll的初始化一定要在数据渲染完成后进行
方法
watch(){}
回调
this.$store.dispatch('reqSearchGoodList', ()=>{
// 1. 初始化better-scroll
this._initScroll()
// 2. 计算右边所有li标签的头部高度, 并放入数组
this._initRightLiTops()
});
3. 左右联动
1. 初始化变量和属性
data(){
return {
scrollY: 0, // 右侧列表滑动的Y轴坐标(实时更新)
rightLiTops: [], // 所有分类的头部位置
}
},
2. 监听滑动事件
1. 监听右侧滑动
rightScroll.on('scroll', ({x, y})=>{
this.scrollY = Math.abs(y)
})
rightScroll.on('scrollEnd', ({x, y})=>{
this.scrollY = Math.abs(y)
})
2. 取出每个li的高度放入数组
_initRightLiTops(){
// 2.1 临时数据
const tempArr = []
// 2.2 第一个高度是0
let top = 0
tempArr.push(top)
// 2.3 遍历所有的li标签, 计算出叠加高度
let allLis = this.$refs.shopsParent.getElementsByClassName('shops-li')
console.log(allLis);
// 2.4 遍历所有li标签(伪数组转成真数组才能用forEach遍历)
Array.prototype.slice.call(allLis).forEach(li => {
// 2.5 获取每一个li标签的高度
top += li.clientHeight
tempArr.push(top)
})
// 2.6 更新
this.rightLiTops = tempArr
// console.log(this.rightLiTops);
}
}
3. 确定当前滚动位置对应的索引
currentIndex(){
// 1. 获取需要的变量
const {scrollY, rightLiTops} = this
// 2. 根据滚动的区间决定currentIndex的值
const cIndex = rightLiTops.findIndex((rTops, index) =>{
// scrollY >= 当前li的头部高度 && scrollY < 下一个li的头部高度
return scrollY >= rTops && scrollY < rightLiTops[index + 1]
})
// 3. 返回计算出来的动态索引
// console.log(cIndex);
return cIndex
}
0 条评论
下一页
