本文主要为大家详细介绍了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>
相关推荐：
vue利用better-scroll实现轮播图与页面滚动
js实现scroll自定义滚动效果
关于jquery滚动插件scrollable.js用法分析
以上就是vue滚动轴插件better-scroll详解的详细内容。