首先我们需要使用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>
vue.js学习之 如何在better-scroll加载完成后,自动滚动到最底部
原文地址:https://www.cnblogs.com/momozjm/p/8183084.html