需求:一般在scroll-view中会放置一个list列表,当列表条目增加的时候,使其自动滚动到底部显示最后一条
官方文档:scroll-view
有两个可用属性:声明scroll-into-view或者scroll-top
个人尝试后的结果,使用scroll-into-view在h5上有效,在微信小程序上无效;使用scroll-top在微信小程序也正常
scroll-into-view使用
<scroll-view scroll-y="true" style="height: 400rpx;"
:scroll-into-view="bottomId" scroll-with-animation="true">
<view v-for="(item,index) in list">
<view :style=" 'height: 180rpx; background-color:' + item.color"></view>
</view>
<view :id="'p'+(list.length)">底部</view>
</scroll-view>
在data中初始化bottomId
在添加数据的时候
setTimeout(()=>{
this.num = this.list.length
this.bottomId = 'p'+ (this.num)
},500)
注意点:1. scroll-view要有明确的高度
2. bottomId和要滚动到的组件的id要一致,且是变化的
3. 使用setTimeout方法来延迟更改变量
scroll-top使用
<scroll-view scroll-y="true" style="height: 400rpx;"
:scroll-top="scrollTopHeight" scroll-with-animation="true">
<view v-for="(item,index) in list">
<view :style=" 'height: 180rpx; background-color:' + item.color"></view>
</view>
</scroll-view>
在data中初始化scrollTopHeight
在添加数据的时候
this.$nextTick(()=>{
this.scrollTopHeight = this.oldScrollTopHeight+200
})
注意点:1. scroll-view要有明确的高度
2. 使用this.$nextTick方法来延迟更改变量
关于this.$nextTick方法,目前我对官网的介绍理解是:该方法的回调会在页面DOM更新完成后执行
最后,使用 scroll-with-animation="true"使滚动看着比较平滑