跟做慕課網的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(() => {//      this._initScroll();      this._calculateHeight();     });    });   this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];  },  methods: {   selectMenu (index, event) {    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    });    this.foodsScroll = new BScroll(this.$refs.foodsWrap, {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>