vue.js2.0 实现better-scroll的滚动效果

最新推荐文章于 2024-08-09 08:07:05 发布

打锤子棒棒糖

最新推荐文章于 2024-08-09 08:07:05 发布

阅读量379

点赞数 1

分类专栏： Vue.js

本文链接：https://blog.csdn.net/qq_33022911/article/details/81607165

版权

本文介绍了如何在 Vue.js2.0 中使用 better-scroll 创建滚动效果，包括普通滚动列表、轮播图和 picker。通过 ref 属性和计算属性实现左右页面的联动，详细讲解了初始化滚动、计算高度和响应点击事件以更新右侧内容位置的方法。

摘要由CSDN通过智能技术生成

什么是 better-scroll

better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。

<template>
    <div>
        <div class="goods">
            <div class="menu-wrapper" ref="menuWrapper">
            </div>
            <div class="food-wrapper" ref="foodWrapper">
            </div>
        </div>
    </div>
</template>

与1.0版本不同的是,我们使用的是ref

<script type="text/ecmascript-6">
    import BScroll from "better-scroll";

    export default {
        data(){
			return {
				currentIndex:1,
				goods:[]
			}			
		},
		created(){
			this.classMap=['decrease','discount','special','invoice','guarantee'];
			this.$http.get('/api/goods').then((response)=>{
				response=response.body;
				if (response.errno===ERR_OK) {
					this.goods=response.data;
				}
                //dom结构加载结束(nextTick这个接口是计算dom相关的,要确保原生dom已经渲染了)
				this.$nextTick(()=>{
					this._initScroll();
				});
			});
		},
		methods:{
			_initScroll(){
                // 使用better-scroll实现的关键代码
				this.menuScroll=new BScroll(this.$refs.menuWrapper,{click:true});
				this.foodScroll=new BScroll(this.$refs.foodWrapper,{click:true});
			}
		}
    };
</script>

很简单这样页面就可以滚动了,如下图

但是,这样左右两个页面并没有联动起来,需要我们再定义一个方法来计算滚动的高度,以及在计算属性中计算左侧当前索引在哪里

从而定义左侧边栏的位置

		computed:{
			//用来计算左侧当前索引在哪，从而定位到左侧边栏的位置
			currentIndex(){
				for (let i = 0; i < this.listHeight.length; i++) {
					var height1=this.listHeight[i]