uniapp关于scroll-view一直自动滚动到底部的功能_uniapp scroll-view 滚动到底部

需求：一般在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>
1
2
3
4
5
6
7

在data中初始化bottomId
在添加数据的时候

setTimeout(()=>{
	this.num = this.list.length
	this.bottomId = 'p'+ (this.num)
},500)
1
2
3
4

注意点：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>
1
2
3
4
5
6

在data中初始化scrollTopHeight
在添加数据的时候

this.$nextTick(()=>{
	this.scrollTopHeight = this.oldScrollTopHeight+200
})
1
2
3

注意点：1. scroll-view要有明确的高度
2. 使用this.$nextTick方法来延迟更改变量

关于this.$nextTick方法，目前我对官网的介绍理解是：该方法的回调会在页面DOM更新完成后执行

最后，使用 scroll-with-animation="true"使滚动看着比较平滑