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

npm i (i是install縮寫(xiě))

import BScroll from 'better-scroll';

<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 type="text/ecmascript-6"> import Vue from 'vue'; import BScroll from 'better-scroll'; import shopcart from '@/components/shopcart/shopcart'; export default { props: {//接收父組件傳的數(shù)據(jù)  seller: {  type: Object  } }, data () {  return {  goods: [],  listHeight: [],//菜單中一個(gè)菜單欄目的高度  scrollY: 0//定義的Y滾動(dòng)軸及初始值  }; }, computed: {//計(jì)算屬性  currentIndex () {//當(dāng)前菜單欄在整個(gè)菜單中的下標(biāo)index  for (let i = 0; i < this.listHeight.length; i++) {//遍歷菜單中每個(gè)欄目的高度   let height1 = this.listHeight[i];//第i個(gè)欄目的高度   let height2 = this.listHeight[i + 1];//第i+1個(gè)欄目的高度   if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {//根據(jù)當(dāng)前滾動(dòng)軸的位置得出index(如果第二個(gè)欄目不存在即第一個(gè)欄目是最后一個(gè))或者(當(dāng)前欄目高度大于等于第一個(gè)并且當(dāng)前滾動(dòng)軸小于第二個(gè)欄目高度)   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>