vue滾動軸插件better-scroll使用詳解

更新時間：2017年10月17日 09:14:02 作者：昔有木如蓋

這篇文章主要為大家詳細(xì)介紹了vue滾動軸插件better-scroll的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

跟做慕課網(wǎng)的vue高仿外賣項目中用到了一個很好用的插件BScroll，用來計算左側(cè)menu欄對應(yīng)右側(cè)foods欄相應(yīng)顯示的食物區(qū)，如果不用插件就比較費事了，因此這里分享一下這個插件的簡單使用：

一、項目中下載，并引入

在配置文件package.json中引入版本

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

然后進入項目目錄,打開cmd更新配置

npm i (i是install縮寫)

最后引入，比如我在項目goods組件中使用則：

import BScroll from 'better-scroll';

二、舉個栗子

需求是處于當(dāng)前比如熱銷榜欄目，則菜單欄高亮。滾動到下一欄高亮欄目則下一欄菜單高亮。點擊菜單中某一欄菜單該欄目高亮并且跳轉(zhuǎn)到對應(yīng)食物區(qū)。

下面是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: {//接收父組件傳的數(shù)據(jù)
  seller: {
  type: Object
  }
 },
 data () {
  return {
  goods: [],
  listHeight: [],//菜單中一個菜單欄目的高度
  scrollY: 0//定義的Y滾動軸及初始值
  };
 },
 computed: {//計算屬性
  currentIndex () {//當(dāng)前菜單欄在整個菜單中的下標(biāo)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)) {//根據(jù)當(dāng)前滾動軸的位置得出index(如果第二個欄目不存在即第一個欄目是最后一個)或者(當(dāng)前欄目高度大于等于第一個并且當(dāng)前滾動軸小于第二個欄目高度)
   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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: