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;
	}
相关推荐
FungLeo2 小时前
成为全栈·Vue 管理后台篇·分类树与标签管理:层级数据如何落到管理界面
前端·javascript·vue.js·分类树·naive ui·标签管理·前端数据结构
总要学点什么2 小时前
第108篇:三维特效-图片轨迹线效果——把贴图滚成一串箭头,想用它的本色反而整条消失
开发语言·javascript·ecmascript·gis·webgl·材质·cesium
Lank_M5 小时前
白底都占八成,PNG 为何只在图表页赢过 JPG
前端
张一凡935 小时前
给 Coding Agent 加一道"架构闸门":Jin 是如何做到"先审架构、再写代码、不漂移"的
前端·后端·agent
Linye5 小时前
AI 写的 HTML 原型全是空壳?聊聊真实 DOM 交互避坑
前端·人工智能
ZANE5 小时前
纯前端实现的 PDF 与图片互相转换工具技术实现
前端
Swot6 小时前
SvelteKit Remote Functions 使用指南
前端·后端
Cooper256 小时前
三源热榜去重加 AI 摘要:URL 唯一键踩出的三个坑
前端·python
Yk酱228406 小时前
A2UI探索随笔-技术选型
前端
前端繁华如梦6 小时前
# 从 73000 行压缩代码到 TypeScript 模块化:我把一个 Three.js FPS 游戏 1:1 复刻了一遍
前端