vue.js学习之 如何在better-scroll加载完成后，自动滚动到最底部

Posted 2020-10-19 _林冲

 

首先我们需要使用scrollTo这个方法：

scrollTo(x, y, time, easing)

参数：

• {Number} x 横轴坐标（单位 px）
• {Number} y 纵轴坐标（单位 px）
• {Number} time 滚动动画执行的时长（单位 ms）
• {Object} easing 缓动函数，一般不建议修改，如果想修改，参考源码中的 ease.js 里的写法

 

为了组件的复用性，我们需要在scroll组件的props添加一个flag，可以监听父元素是否开启滚动到最底部。

scrollToEndFlag: {
        type: Boolean,
        default: false
}

　

接下来我们在scroll组件的mounted中加入如下代码：

setTimeout(() => {
        this._initScroll()
        console.log(this.scroll.maxScrollY)
        if(this.scrollToEndFlag) {
            this.scroll.scrollTo(0,this.scroll.maxScrollY)
        }
}, 100)  

　　

最后在父组件中使用

<scroll :scrollToEndFlag="scrollToEndFlag"> </scroll>