uniapp聊天，上拉加载历史消息位置保持不变，消息发送回滚与消息接收回滚，以及无感加载聊天记录

zyk1036

已于 2023-12-12 13:59:52 修改

阅读量1.1k

点赞数 10

于 2023-12-12 11:01:57 首次发布

本文链接：https://blog.csdn.net/zyk1036/article/details/134944078

版权

<scroll-view 
style="
max-height: calc(100vh - 88rpx);
position: relative;
z-index: 3; 
transform: rotate(180deg);" 
scroll-y="true" 
@scrolltolower="chudi" //触底加载，翻转了那么底就是顶
:scroll-top="scrollTop" //回滚
@scroll="scroll" 
scroll-with-animation>
<view>
<view v-for="(item,index) in chatdetail" :key="index" style="transform: rotate(180deg);">
信息
</view>
</view>
</scroll-view>
//先将其整体翻转180deg，然后将循环的消息翻转180deg(一个view包一条消息)，这样就是正常页面了
//@scroll的方法，为了回滚，消息发送或者接收到时使用goTop()
scroll(e){
				this.old.scrollTop = e.detail.scrollTop
			},
goTop(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
//max-height: calc(100vh - 88rpx);消息少的时候将其置顶
//消息渲染需要根据需求来进行添加，消息发送与接收使用unshift()，将信息加在首位因为我们是翻转的所以最
//下面的是最新的