共计 1285 个字符,预计需要花费 4 分钟才能阅读完成。
【Y 轴滑动 - 根本流程】:
1. 定义初始化 Y 坐标和滚动数组:
scrollY: 0, // 初始化 Y 坐标(用来装以后 Y 坐标)tops:[] // 初始化滚动 li 数组(用来装右侧菜单每个子元素的高度,滑动右侧菜单 > 更新左侧菜单分类)
2. 定义初始化滚动办法:
// 初始化滚动
initScrollY() {
// 因为数据是异步,所以须要列表显示后再创立
let menu_wrapperY = new BScroll('.menu-wrapperY')
let foodScrollY = new BScroll('.food-wrapperY',{
// probeType 是定义 scroll 触发的机会,值可设置 0 /1/2/3,默认是 0 即为不触发,1/ 2 是滑动触发,3 是蕴含惯性滑动触发
probeType: 2
})
// on 是监听
// 给右侧列表绑定 'scroll' 事件
foodScrollY.on('scroll',({x,y})=>{
// scroll 为事件名:滚动的实时坐标
// 坐标取绝对值,获取以后坐标并赋值
this.scrollY = Math.abs(y);
})
// 如果 probeType 是 3 则不须要定义 scrollEnd
// 给右侧列表绑定 'scrollEnd' 事件(为解决惯性滑动)foodScrollY.on('scrollEnd',({x,y})=>{
// scrollEnd 为事件名:滚动的完结坐标
// 坐标取绝对值,获取以后坐标并赋值
this.scrollY = Math.abs(y);
})
}
3. 定义初始化 tops 办法:
// 初始化 tops li
//【留神:获取 dom 办法必须等界面更新后再执行】initTops() {
// 1. 初始化 tops
let initTops = []
let top = 0
initTops.push(top)
// 2. 收集 lis 伪数组转为数组
let lis = this.$refs.foodsTops.getElementsByClassName('food-list');
[...lis].forEach(li => {
top += li.clientHeight
initTops.push(top)
})
// 3. 更新数据
this.tops = initTops
}
4. 调用初始化滚动 /tops 办法:
mounted(){this.$store.dispatch('shop/shopGoods').then((response)=>{
this.shopList = response;
// $nextTick 回调函数在界面更新之后立刻执行
this.$nextTick(() => {this.initScrollY()
this.initTops()})
})
}
5. 获取左侧菜单对应的数组下标:
currentIndex() {let {scrollY, tops} = this
let index = tops.findIndex((top,index)=> {// top = ['每次遍历 li 的高度']
// 通过以后绝对值 Y 坐标来判断 从而得出菜单数组索引
return scrollY >= top && scrollY < tops[index+1]
})
return index
}
正文完