vue 左右滑动菜单_Vue使用better-scroll左右菜单联动

说明

最近想做一个vue商城小项目，练习一下vue的语法，刚刚好碰到了需要左右菜单实现联动，因此就接触了 better-scroll。

代码

页面结构以及数据

//页面结构

• :class="{active: currentIndex === index}"

  @click="selectLeft(index)" ref="lItem">{{ item}}

• {{ items.name}}

  {{ item}}

//数据

export default {

data(){

return {

goodMenu: ['菜单1', '菜单2','菜单3', '菜单4', '菜单5', '菜单6', '菜单7', '菜单8'],

goodList: [

{ name: '菜单1', data: ['1.1', '1.2', '1.3', '1.4', '1.5']},

{ name: '菜单2', data: ['1.1', '1.2', '1.3', '1.4', '1.5', '1.6']},

{ name: '菜单3', data: ['1.1', '1.2', '1.3', '1.4', '1.5']},

{ name: '菜单4', data: ['1.1', '1.2', '1.3', '1.4', '1.5']},

{ name: '菜单5', data: ['1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8']},

{ name: '菜单6', data: ['1.1', '1.2', '1.3', '1.4', '1.5']},

{ name: '菜单7', data: ['1.1', '1.2', '1.3', '1.4']},

{ name: '菜单8', data: ['1.1', '1.2']},

],

scrollY: 0,//获取实时滚动位置

heightList: []//获取每一个li的高度

}

}

渲染结果

左边菜单栏(goodMenu)。

右边菜单栏(goodList)，每一项有一个标题：name，以及菜单数据： data数组。再结合 v-for指令及相关样式即可完成页面简单布局(不是重点)

其他数据先不必理会，先把页面结构渲染出来，下面会一一讲解。

better-scroll的使用

元素纵轴滚动

元素可以滚动，父元素高度固定，overflow为 hidden，子元素高度超过父元素高度即可滑动，不多解释。

左菜单、右菜单可以在父元素滑动

左菜单栏因为要用到 click事件，默认better-scroll是默认阻止 click事件，设置为true派发一个click事件。

右菜单栏，因为需要滚动，并且需要获取实时滚动距离scrollY，因此设置 probeType设置为3，它有三个值1、2、3。看以查看文档probeType。

//引入better-scroll

import Bscroll from 'better-scroll'

export default {

created(){

//因为 _scrollInit函数需要操作DOM，因此必须在DOM元素存在文档中才能获取DOM节点

//因此在 nextTick回调函数里面调用可以是实现此功能

this.$nextTick(() => {

this._scrollInit()

this.getHeight()

})

},

methods:{

//初始化 better-scroll

_scrollInit(){

this.menuList = new Bscroll(this.$refs.goodMenu, {

click: true

})

this.goodmenu = new Bscroll(this.$refs.goodList, {

probeType: 3

})

this.goodmenu.on('scroll', (pos) =>{

//获取实时滚动的距离 使用scrollY接收

this.scrollY = Math.abs(Math.round(pos.y))

})

}

}

获取右菜单栏每个li的高度

这里获取 li 的高度即为当前li的高度加上之前 li 的高度，第一个元素为 0(必须)

methods: {

getHeight(){

//获取每一个li的高度

const lis = this.$refs.rItem

//heightList的第一个元素为0

let height = 0

this.heightList.push(height)

//之后的高度即为当前li的高度加上之前面li的高度和

lis.forEach(item =>{

height += item.clientHeight

this.heightList.push(height)

})

}

}

右菜单滚动，左菜单同步

这里就是根据右菜单滑动的距离以及每一个每一个 li 的高度的比较返回当前应该显示左菜单 li的索引，让该 li 高亮显示，即:class="{active: currentIndex === index}"。

computed:{

currentIndex(){

const index = this.heightList.findIndex((item, index) =>{

return this.scrollY >= this.heightList[index] && this.scrollY < this.heightList[index + 1]

})

return index > 0 ? index : 0

}

}

左菜单点击，右菜单同步

把点击的 菜单索引传入，使用scrollToElement滚动到右菜单的目标元素

selectLeft (index) {

let rItem = this.$refs.rItem

let el = rItem[index]

this.goodmenu.scrollToElement(el, 1000)

}

问题：有时候 currentIndex 会判断不准确，是滑动距离scrollY 以及右菜单 li的高度比较问题，同样一段代码，每个项目遇到的问题都是不一样的，我也是参考网上很多的例子，发现一到自己这里就出现了很多问题，每个人遇到的问题都是不一样的，结合自己的问题，想办法解决，这也是成长的一部分。