解决微信小程序数据渲染缓慢或卡顿的方法

末蓝、 2024-04-18 19:38 64阅读 0赞

在微信小程序中渲染数据时通常会使用setData方法，但是setData对数据是有影响的，**单次设置的数据不能超过1024kB**，否则就会出现卡顿甚至有时会导致小程序闪退等现象，而我们在实现上拉加载分页数据，或下滑加载更多分页数据时，通常会出现卡顿的问题，为了解决这个问题，我的方法是把从接口获取到的数据**一维数组转换为二位数组**，代码如下：

initData() { 
        wx.request({ 
          url: '******', //这里填写你的接口路径
          header: {  //这里写你借口返回的数据是什么类型，这里就体现了微信小程序的强大，直接给你解析数据，再也不用去寻找各种方法去解析json，xml等数据了
            'Content-Type': 'application/json'
          },
          data: { //这里写你要请求的参数
            x: '',
            y: ''
          },
          success: (res) => { 
            //这里就是请求成功后，进行一些函数操作
            console.log(res.data)
            var a = res.data.listData;
            var _listData = Object.values(a.reduce((re, item) => { 
              re[item.receiveTime] ? re[item.receiveTime].push(item) : re[item.receiveTime] = [item];
              return re;
            }, { }));
            this.setData({ 
              listData: _listData
            })
          }
        })
      },
      onLoad() { 
        this.initData()
      }

一般从接口拿到的数据是一个一维数组\[\{…\}, \{…\}, \{…\}, \{…\}, \{…\}, \{…\}, \{…\}, \{…\}, \{…\}, \{…\}, \{…\}, \{…\}\]，通过上述方法就变成了二维数组\[Array(12)\]，然后，把每次触顶或触底所得的数据使用**concat**拼接起来就变成了\*\*\[Array(15), Array(12), Array(13), Array(12)\]\*\*这样形式，最后渲染的时候使用双重循环来，如下：

<block wx:for="listData" wx:key="in{ {index}}">
    	<view wx:for="item" wx:key="en{ {index}}">
            <view>{
       {item.content}}</view>
        </view>
    </block>

好啦，今天就说到这，下次继续。。。。。。