别找了，你要的scroll-view自动滚动底部的文章在这里（适用控制台输出、监听串口内容显示）

最新推荐文章于 2024-06-21 15:14:18 发布

dlpay

最新推荐文章于 2024-06-21 15:14:18 发布

阅读量102

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_56924782/article/details/131550497

版权

<template>
	<view>
		<view style="height: 200px;border: 1px solid #000;">
			<scroll-view scroll-y="true" style="width: 200px;height: 200px;border: 1px solid red"
				:scroll-top="scrollTop" >
				<textarea :auto-height="true" style="max-height: 200px;border: 1px solid #000;" maxlength="-1"
					:value="msg" :auto-focus="false" inputmode="none" @linechange="scrollToBottom"></textarea>
			</scroll-view>

		</view>
	</view>
</template>

:scroll-top=“scrollTop”：滚动条位置
@linechange=“scrollToBottom”：监听textarea的行数变化

<script>
	export default {
		data() {
			return {
				msg: "",
				scrollTop: 0
			}
		},
		onShow() {
			var a = 0
			setInterval(() => {
				a += 1
				this.msg = this.msg + a + "\n"
			}, 1000)
		},
		methods: {
			scrollToBottom(e) {
				console.log(e.detail)
				this.scrollTop = e.detail.height //赋予textarea的高度
			}
		}
	}
</script>