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

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

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

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

微信小程序数据渲染和数据请求
微信开放文档数据渲染概念:微信小程序和Vue实现理念是一致的,是基于数据驱动完成页面数据的自动化渲染.微信小程序中数据和Vue一样是响应式,即数据的更改会驱动页面进行数据的刷新. 具体操作首先找 ...
微信小程序数据渲染不出来，setData用法技巧全
在开发过程中我们常常发现从后台获取到了数据后(data做出了改变而页面并未加载这些数据).我们先用console.log()把数据输出,确保已经获取到数据,如果已经获取到了那就是下面情况出错了. 未使 ...
解决微信小程序云开发模式无法获取数据库数据问题
解决微信小程序云开发模式无法获取数据库数据问题问题: 在数据库有两条数据,获取数据时输出窗口没有任何反应错误原因: 检查数据库名字是否对应检查你是否有多个云开发环境如果有多个云开发环境,就需要 ...
微信小程序渲染层网络错误_详解微信小程序「渲染层网络层错误」的解决方法...
问题描述: 情况是这样的,我需要在小程序中通过image标签显示三张我的图片,毫无疑问,其重点部分肯定在image的src属性上,请看思路分析: 我们可以新建一个专门放图片的文件夹,然后将我们项目所需 ...
微信小程序中嵌套html_在微信小程序中渲染HTML内容3种解决方案及分析与问题解决...
大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 在微信小程序中渲 ...
php渲染页面简单例子,微信小程序如何渲染html内容（示例讲解）
本篇文章给大家带来的内容是关于微信小程序如何渲染html内容(示例讲解),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 最近又做了一个新的小程序关于物流订单查询遇到了一个小问题:数 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
解决微信小程序的video元素层级太高无法遮盖问题
解决微信小程序的video元素层级太高无法遮盖和show-play-btn属性失效问题今天在项目中遇到了这个问题,需要在微信小程序中用视频作为背景,微信开发者工具中模拟的没问题,真机调试就发现vid ...
解决微信小程序银行卡号输入转换格式
解决微信小程序银行卡号输入转换格式问题 ps:2017-02-17 19:44 (发现新bug,暂已解决优化中) 新手第一次写博客,请多多见谅! (感觉会有更好的办法,希望有大牛能对我指点指点) 输入 ...

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

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

最新文章

热门文章