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

说明

我这边用小程序集成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()}}},