uniapp vue3 微信小程序随着对话内容的输出页面自动滑动到底部

最近大模型的应用很是火热，闲来无事顺手也写一个自己的基于大模型的对话问答小程序。其中遇到的主要问题就是大模型的流式输出，页面内容不断动态增加，为了良好的用户体验，需要页面自动往下滚动，这个其实在web端很容易实现，由于微信小程序没有dom节点，在实现的过程中还是遇到了一些坑，特此记录。

1、 基于scroll-view的使用

微信小程序提供原生视图scroll-view， 可滚动视图区域。用于区域滚动。提供scroll滑动监听事件，scroll-top、scroll-left等属性。由于我是基于uniapp开发的，使用的代码和方法等是基于vue3+uniapp，但和微信小程序原生使用是一脉相承的。 主要实现是获取元素的高度，并且改变scroll-top属性值来实现滚动，但是实验中发现scrollTop的值改变了，页面并没有滚动。不知道为何。希望有看到的大神可以帮忙解惑，多谢！！

	<view>
		<customNavbarVue title="消息页"></customNavbarVue>
		<view class="mess-box"  :style="{'paddingTop': navHeight+'px'}">
			<scroll-view class="scroll-box"  
			:scroll-top="scrollTop" scroll-with-animation scroll-y="true"
			  @scroll="scroll">
				<view id="contentBox">
					<view class="top-box-icon">
						<up-icon name="/static/renwu.png" size="20"></up-icon>
						<view class="top-text">{{question}}</view>
					</view>
					<view v-for="i in 15" :key="i">{{i}}:这是测试哈哈哈哈哈哈哈哈哈哈啊哈哈
					哈哈哈哈啊哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈</view>
				</view>
				
				<!-- <zero-markdown-view :markdown="sparkResult" themeColor="#000000"></zero-markdown-view> -->
			</scroll-view>
			
			<bottomTabVue></bottomTabVue>
		</view>
		
		
	</view>
</template>

js代码

	onMounted(()=>{
		setScroll()
		
	})
	
	function setScroll(){
		const query = uni.createSelectorQuery().in(instance.proxy);
		query.select('#contentBox').boundingClientRect((data) => {
			console.log("得到布局位置信息" + JSON.stringify(data));
			
			scrollTop.value = data.height 
		}).exec();
	}
	const scrollTop = ref(0.001)

2、基于页面的滚动

使用uni.pageScrollTo方法实现页面滚动，生效！！

js代码

	onMounted(()=>{
		setScroll()
		
	})
	
	function setScroll(){
		const query = uni.createSelectorQuery().in(instance.proxy);
		query.select('#contentBox').boundingClientRect((data) => {
			console.log("得到布局位置信息" + JSON.stringify(data));
			uni.pageScrollTo({
				scrollTop: data.height
			})
			
		}).exec();
	}
	const scrollTop = ref(0.001)

两边都是一样的css代码

.mess-box{
	background: rgba(246,248,252,1);
	box-sizing: border-box;
	// min-height: 100vh;
	padding-bottom: 180rpx;
	font-size: 28rpx;
	// line-height: 1.5;
	color: #2e2e23;
	margin-top: 20rpx;
	text-align: justify;
}
.top-box-icon{
	display: flex;align-items: center;
	.top-text{
		margin-left: 20rpx;
		font-size: 26rpx;
		color: #2e2e2e;
	}
}
.scroll-box{
	background-color: #fff;
	border-radius: 10rpx;
	padding: 20rpx;
	box-sizing: border-box;
}
</style>