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

一、问题

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

二、如何使用better-scroll

1、第一步肯定是先引入

import BScroll from 'better-scroll'

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

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属性的元素,第二个参数是一个对象,里面可以定义各种配置,具体可以参考官网。

你可能感兴趣的:(vue)