说明

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

代码

• 页面结构以及数据

    //页面结构<template> <div id="wrap"><div class="goodMenu" ref="goodMenu"><ul><li v-for="(item ,index) in goodMenu" :key="index":class="{active: currentIndex === index}"@click="selectLeft(index)" ref="lItem">{{ item}}</li></ul></div><div class="goodList" ref="goodList"><ul><li v-for="(items, index) in goodList" :key="index" ref="rItem"><p>{{ items.name}}</p><div v-for="(item, key) in items.data" :key="key">{{ item}}</div></li></ul></div></div></template> //数据<script>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的高度}}</script>

• 渲染结果
  • 左边菜单栏(goodMenu)。
  • 右边菜单栏(goodList)，每一项有一个标题：name，以及菜单数据： data数组。再结合 v-for指令及相关样式即可完成页面简单布局(不是重点)
  • 其他数据先不必理会，先把页面结构渲染出来，下面会一一讲解。

better-scroll的使用

• 元素纵轴滚动
  • 元素可以滚动，父元素高度固定，overflow为 hidden，子元素高度超过父元素高度即可滑动，不多解释。
• 左菜单、右菜单可以在父元素滑动
  • 左菜单栏因为要用到 click事件，默认better-scroll是默认阻止 click事件，设置为true派发一个click事件。
  • 右菜单栏，因为需要滚动，并且需要获取实时滚动距离scrollY，因此设置 probeType设置为3，它有三个值1、2、3。看以查看文档probeType。

    //引入better-scrollimport 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的第一个元素为0let height = 0this.heightList.push(height)//之后的高度即为当前li的高度加上之前面li的高度和lis.forEach(item =>{height += item.clientHeightthis.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.rItemlet el = rItem[index]this.goodmenu.scrollToElement(el, 1000)}

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