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