vue.js學習之 如何在better-scroll加載完成后，自動滾動到最底部

 

首先我們需要使用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>