使用better-scroll解决移动端的滚动问题

一、问题

在移动端开发中，内容溢出后，会产生页面滚动，这时候无论是向上还是向下滑动的用户体验都很差，并且没有下拉、上拉的效果。这时候可以使用better-scroll来解决问题。

二、如何使用better-scroll

1、第一步肯定是先引入

import BScroll from 'better-scroll'

2、在外层容器添加ref属性

<div class="menu-wrapper" ref="menuScroll">
    <div>test test test test </div>
</div>

3、在DOM挂载完成的时候创建better-scroll实例，并且运行

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

这一步可以在created的钩子函数上执行，但前提是要使用 this.$nextTick ，该回调函数会等待DOM挂载完成之后，才会执行里面的代码。所以完整的写法应该是这样的。

created() {

    this.$nextTick(() => {
        // 执行滚动方法
        this.initScroll();
    })

},

methods: {

    initScroll() {
        this.menuScroll = new BScroll(this.$refs.menuScroll, {
            click: true    // 这里表示允许点击事件
        });
    }

}

new BScroll()的第一个参数是HTML上定义了ref属性的元素，第二个参数是一个对象，里面可以定义各种配置，具体可以参考官网。