Vue系列-使用better-scroll的方法

1.npm下载

npm install better-scroll --save

2.在需要使用better-scroll的地方引入

import BScroll from ‘better-scroll’

3.初始化这个组件，在methods 里面将这个写为一个方法

_initScroll () {
	this.menuScroll = new BScroll(this.$refs.menuWrapper, {
		click: true
	});
}

4.在钩子函数中调用这个方法

//要在数据获取成功后再调用
this.$nextTick(() => {
   this._initScroll();
});

实例源码：

<template>
    <div class="goodsContainer">
        <div class="menu-wrapper" ref="menuWrapper">
            <ul>
                <li class="menu-item border-1px" v-for="(item, index) in goods" :key="index">
                    <span class="text">
                        <span class="icon" v-show="item.type>0" :class="classMap[item.type]"></span>
                        {{item.name}}
                    </span>
                </li>
            </ul>
        </div>
        <div class="foods-wrapper" ref="foodsWrapper">
            <ul>
                <li class="food-list" v-for="(item, index) in goods" :key="index">
                    <h1 class="title">{{item.name}}</h1>
                    <ul>
                        <li class="food-item border-1px" v-for="(food, index2) in item.foods" :key="index2">
                            <div class="icon">
                                <img :src="food.icon" width="57" height="57" alt="" srcset="">
                            </div>
                            <div class="content">
                                <h2 class="name">{{food.name}}</h2>
                                <p class="desc">{{food.description}}</p>
                                <div class="extra">
                                    <span class="count">月售{{food.sellCount}}份</span>
                                    <span>好评率{{food.rating}}%</span>
                                </div>
                                <div class="price">
                                    <span class="now">￥{{food.price}}</span>
                                    <span v-show="food.oldPrice" class="old">￥{{food.oldPrice}}</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import BScroll from 'better-scroll';
export default {
    data () {
        return {
            goods: []
        };
    },
    props: ['seller'],
    created () {
        this.$ajax({
            method: 'GET',
            url: '/api/goods'
        }).then(res => {
            this.goods = res.data.data;
            this.$nextTick(() => {
                this._initScroll();
            });
        });
    },
    methods: {
        _initScroll () {
            this.menuScroll = new BScroll(this.$refs.menuWrapper, {
                click: true
            });
            this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
                click: true
            });
        }
    }
};
</script>