uniapp scroll-view滚动到最后

列表 v-for 循环场景(高频)

页面

html 复制代码
		<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

javascript 复制代码
	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

html 复制代码
	.msg-scroll {
		flex: 1;
		padding: 20rpx;
		height: 80vh;
	}
相关推荐
陈随易1 小时前
从今天起,你只需要一个浏览器之Ego lite
前端·后端·程序员
怕浪猫1 小时前
Step 5 Preview 模型写 3D 象棋,两个小时上线
前端·javascript·面试
Highcharts.js2 小时前
Highcharts甘特图开发带导航功能的项目管理图示例
开发语言·前端·javascript·甘特图·highcharts·项目管理图
Hilaku2 小时前
前端不懂业务有多可怕?
前端·javascript·程序员
涛涛ing2 小时前
模型吐出半截JSON,前端如何边收边渲染?2026年AI应用必须闯过的工程关
前端
aixingpan2 小时前
aixingpan.cnAPI开发文档:api_docs_trichart_natal_solar_return_transit2接口指南
前端·php
FRing033 小时前
JavaScript入门到精通二十八(forEach遍历、创建对象的三种方式、构造函数、new实例化执行过程、实例成员和静态成员)
开发语言·前端·javascript
燕落南枝3 小时前
CSS 表单选择器与伪元素选择器详解
前端·css
拖孩3 小时前
一个人 + AI 做的小程序,今天,正式回本了
前端·后端·微信小程序