vue滚动轴插件better-scroll详解-js教程-PHP中文网

vue滚动轴插件better-scroll详解

小云云

发布： 2018-01-15 13:57:27

原创

2514人浏览过

本文主要为大家详细介绍了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>
 <p class="goods">
  <p 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>
  </p>
  <p class="foods-wrap" ref="foodsWrap">//食物栏
  </p>
 </p>
</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>

登录后复制