【实现效果】:
1.滑动右侧列表,左侧菜单高亮
2.点击左侧菜单,右侧列表滑到对应列表位置
【大致思路】:
1.scrollY:获取当前Y坐标并监听滑动【注意:转为绝对值】
2.tops:获取右侧列表每个子元素li高度的数组(通过$refs.Dom获取容器,伪数组转为数组,遍历获取每个li的clientHeight)
3.滑动右侧列表,左侧菜单高亮:
findIndex遍历tops数组,返回top高度小于当前Y坐标同时当前Y坐标小于下个top高度的索引,绑定菜单高亮
4.点击左侧菜单,右侧列表滑到对应列表位置:
左侧菜单点击事件传入(index),通过tops[index]获取到对应的li高度,再传参给scrollTo(x, y, time)滑动到指定的位置
【注意:此时传参的Y坐标应为负值才能向下滑动】
【Y轴菜单列表滑动-实现代码】:
1.定义初始化Y坐标和滚动数组:
scrollY: 0, //初始化Y坐标(用来装当前Y坐标)
tops:[] //初始化滚动li数组(用来装右侧菜单每个子元素的高度,滑动右侧菜单>更新左侧菜单分类)
2.定义初始化滚动方法:
methods: {
// 初始化滚动
initScrollY() {
// 因为数据是异步,所以需要列表显示后再创建
this.menu_wrapperY = new BScroll('.menu-wrapperY