uniapp + vue 定位聊天最新消息实现滚动条一直在元素的最底部

最新推荐文章于 2025-04-16 09:47:33 发布

艾莉宝贝

最新推荐文章于 2025-04-16 09:47:33 发布

阅读量2.9k

点赞数

分类专栏： uni-app 文章标签：聊天最底部

本文链接：https://blog.youkuaiyun.com/weixin_42793426/article/details/103522727

版权

通过uniapp的scroll-view组件结合生命周期函数，利用uni.createSelectorQuery().select().boundingClientRect()获取元素位置，设置setTimeout确保页面加载完成，实现聊天窗口滚动条始终位于最后一条消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 scroll-view 配合uni.createSelectorQuery() 以及boundingClientRect()即可实现；

<scroll-view id="scrollview" class="chat-window" scroll-y="true" :style="{height: style.contentViewHeight + 'px'}"
		 :scroll-with-animation="true" :scroll-top="scrollTop">
		<view class="content-all">
				<block v-for="(item,index) in messages" :key="index" class="m-item">
					<view class="user-chat-item animated fadeIn fast u-f right" v-if="globalUser.id==item.fromUserId">
						<view class="meet-name fb">{
  {item.msg}}:{
  {globalUser.name}}</view>
					</view>
					<view class="user-chat-item animated fadeIn fast u-f left" v-else>
						<view class="meet-name fb">{