微信小程序集成腾讯im，会话列表数据过多（长列表），卡顿问题的解决

最新推荐文章于 2024-04-29 16:23:43 发布

韩zj

最新推荐文章于 2024-04-29 16:23:43 发布

阅读量1.1k

点赞数

文章标签：微信小程序小程序长列表

本文链接：https://blog.csdn.net/jifashihan/article/details/132707859

版权

说明

我这边用小程序集成im，然后结合公司的需求，做了一个聊天的小程序，在测试上线的时候没有问题，结果到客户那边，因为他们聊天的人多，会话列表达到了300多条，然后点击会话列表，进入聊天页面，会卡顿。下图是测试环境的
在这里插入图片描述

尝试解决

因为我在im原有基础上，增加了很多遍历逻辑，im保存的用户信息较少，所以先获取会话列表，然后根据imid，去自己数据库查询用户信息，如果数据过多，先去调用接口，然后再将信息重新遍历设置到列表，所以我以为是这种代码造成的卡顿，结果把这些代码去掉以后，还是卡顿

发现问题

将那些逻辑遍历之类的代码去掉，发现列表第一次点击，不卡顿，第二次再点击，卡顿，所以我以为是会话页面的资源没有释放，然后我在返回的时候各种释放，类似于这样
在这里插入图片描述
但是呢，没效果。后来就在想，一样的代码，为什么长列表就会卡顿，然后在看文档的时候，发现了一个专门针对长列表的解决组件，试了一下，快了很多

recycle-view

要严格按照文档来集成，我就是因为少了一个配置，报错，以为是环境的问题，差点放弃

解决

按照文档集成recycle-view，把相关代码贴一下
布局代码

<view class="conversation-list-area">
			<!-- <scroll-view class="scoll-view" scroll-y="true"> -->
			<recycle-view batch="{{batchSetRecycleData}}" id="recycleId">
				<recycle-item wx:for="{{recycleList}}" wx:key="id">
					<ConversationItem wx:key="index" id="{{item.conversationID}}" data-type="{{item.type}}" conversation="{{item}}" bindtap="handleRoute" statusList="{{statusList}}" bind:transCheckID="transCheckID" charge="{{transChenckID===item.conversationID}}" wx:if="{{item.type!='@TIM#SYSTEM'}}" bind:updateLocalConversationList="updateLocalConversationList" data-type="{{item.type}}">
					</ConversationItem>
				</recycle-item>
			</recycle-view>
			<!-- </scroll-view> -->
		</view>

js代码

ready() {
					wx.$TUIKit.on(wx.$TUIKitTIM.EVENT.MESSAGE_RECEIVED, this.$onMessageReceived, this);
					ctx = createRecycleContext({
						id: 'recycleId',
						dataKey: 'recycleList',
						page: this,
						itemSize: { // 这个参数也可以直接传下面定义的this.itemSizeFunc函数
							height: this.rpx2px(150),
							width: this.rpx2px(750)
						}
					})


				},
...
rpx2px(rpxNum) {
					return rpxNum * app.globalData.rpx2px;
				},

app.js设置


onLaunch: function () {

		wx.getSystemInfo({
			success: e => {
			  // 设计稿一般是 750 rpx, 但是 canvas 是 px;
			  // 1rpx 转换成 px 的时候
			  this.globalData.rpx2px = 1 / 750 * e.windowWidth;
			}
		  });
		  .....
		  }
globalData: {
		....
		rpx2px:0,
		
	
	}

定义一个方法，用于数据的更新或者添加

	updateRecylerView(dataList) {
					wx.hideLoading()
				
					if(dataList.length==0){
						ctx.splice(0, 99999);
						ctx.forceUpdate()
						return
					}

					if (ctx.getList() == null || ctx.getList().length == 0) {
						ctx.append(dataList)
					} else {
						if(ctx.getList().length!=dataList.length){
							ctx.splice(0, 99999);
							ctx.append(dataList)
						}else{
							ctx.update(0, dataList);
							ctx.forceUpdate()
						}
					
					}
					

				},