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

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

浏览量:546 时间: 来源:四夕木木夕木木

在微信小程序中渲染数据时通常会使用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

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎