html5商品滑动多联菜单,【Better-Scroll插件】Y轴菜单列表滑动

【实现效果】：

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