uniapp scroll-view滚动到最后

列表 v-for 循环场景（高频）

页面

		<scroll-view scroll-y class="msg-scroll" :scroll-into-view="targetId">
			<view class="msg-item" v-for="(item, index) in msgList" :key="index">
				<view :id="'msg-' + item.id">
					<view class="bubble bubble-right">{{ item.content }}</view>
				</view>
				
			</view>
		</scroll-view>

JS

	export default {
		data() {
			return {
				msgList: [],
				targetId: '',
				}
		},
		onLoad(){
			//装入数据
		},
		onShow() {
			setTimeout(() => {
				this.scrollToBottom();
			}, 500);

		},
		methods: {
			scrollToBottom() {
				if (!this.msgList.length) return
				const last = this.msgList[this.msgList.length - 1]
				this.targetId = 'msg-' + last.id
				// 清空，保证下次可以再次触发
				this.$nextTick(() => {
					this.targetId = ''
				})
			},
}

Style

	.msg-scroll {
		flex: 1;
		padding: 20rpx;
		height: 80vh;
	}

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/m0_37570176/article/details/169056157