vue之滚动轴插件better-scroll

跟做慕课网的vue高仿外卖项目中用到了一个很好用的插件BScroll，用来计算左侧menu栏对应右侧foods栏相应显示的食物区，如果不用插件就比较费事了，因此这里分享一下这个插件的简单使用：
一，项目中下载，并引入
在配置文件package.json中引入版本

"dependencies": {
    "better-scroll": "^0.1.7"
  }

然后进入项目目录,打开cmd更新配置

npm i (i是install缩写)

最后引入，比如我在项目goods组件中使用则：

import BScroll from 'better-scroll';

二，举个栗子
需求是处于当前比如热销榜栏目，则菜单栏高亮。滚动到下一栏高亮栏目则下一栏菜单高亮。点击菜单中某一栏菜单该栏目高亮并且跳转到对应食物区。
下面是foods组件中的代码
template：

<template>
  <div class="goods">
    <div class="menu-wrap" ref="menuWrap">//菜单栏
      <ul>
        <li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)">
          <span class="text border-1px">
            <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
          </span>
        </li>
      </ul>
    </div>
    <div class="foods-wrap" ref="foodsWrap">//食物栏
    </div>
  </div>
</template>

script

<script type="text/ecmascript-6">
  import Vue from 'vue';
  import BScroll from 'better-scroll';
  import shopcart from '@/components/shopcart/shopcart';
  export default {
    props: {//接收父组件传的数据
      seller: {
        type: Object
      }
    },
    data () {
      return {
        goods: [],
        listHeight: [],//菜单中一个菜单栏目的高度
        scrollY: 0//定义的Y滚动轴及初始值
      };
    },
    computed: {//计算属性
      currentIndex () {//当前菜单栏在整个菜单中的下标index
        for (let i = 0; i < this.listHeight.length; i++) {//遍历菜单中每个栏目的高度
          let height1 = this.listHeight[i];//第i个栏目的高度
          let height2 = this.listHeight[i + 1];//第i+1个栏目的高度
          if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {//根据当前滚动轴的位置得出index(如果第二个栏目不存在即第一个栏目是最后一个)或者(当前栏目高度大于等于第一个并且当前滚动轴小于第二个栏目高度)
            return i;//如果满足则返回index
          }
        }
        return 0;//初始值0
      }
    },
    created () {
      Vue.prototype.$http.get('/api/goods')
        .then(res => {
          this.goods = res.data.data;
          this.$nextTick(() => {//方法在这里调用不然计算滚动轴会出现错误。作用是：在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的 DOM。
            this._initScroll();
            this._calculateHeight();
          });
        });
    },
    methods: {
      selectMenu (index, event) {//这里如果不写这个方法会有bug，因为要在下面设置 click: true//bScroll里的阻止默认事件，而在PC端不存在默认事件因此会执行两次点击事件接收遍历的菜单栏的index，并传入bScroll里的event._constructed方法，这个方法仅被移动端支持，如果是在PC浏览器下则直接结束
        if (!event._constructed) {
          return;
        }
        let foodList = this.$refs.foodsWrap.getElementsByClassName('food-list-hook');
        let el = foodList[index];
        this.foodsScroll.scrollToElement(el, 300);
      },
      _initScroll () {
        this.menuScroll = new BScroll(this.$refs.menuWrap, {
          click: true//bScroll里的阻止默认事件
        });
        this.foodsScroll = new BScroll(this.$refs.foodsWrap, {probeType: 3
        });//通过ref来监测组件，probeType: 3是传值，能够监听滚动轴
        this.foodsScroll.on('scroll', (pos) => {//监听食物区滚动轴
          this.scrollY = Math.abs(Math.round(pos.y));对滚动轴的值进行绝对值取整处理
          console.log(this.scrollY);
        });
      },
      _calculateHeight () {//食物区滚动轴计算
        let foodList = this.$refs.foodsWrap.getElementsByClassName('food-list-hook');
        let height = 0;
        this.listHeight.push(height);
        for (let i = 0; i < foodList.length; i++) {
          let item = foodList[i];
          height += item.clientHeight;
          this.listHeight.push(height);
        }
      }
    }
  };
</script>