美文网首页
小程序防止加载大量数据导致卡顿

小程序防止加载大量数据导致卡顿

作者: 涳_de26 | 来源:发表于2019-05-24 17:34 被阅读0次

小程序防止加载大量数据导致卡顿,转自https://developers.weixin.qq.com/community/develop/article/doc/000ae0fcefce700ae5882c4e351813

逻辑:从后台拿到的数据不直接丢到对应的mrData里面,而是让他成为mrData中的一直键的值,在html里面就循环两次,循环出来,然后获取新的值用[mrData[${that.data.mrData.length}]]设置mrData键的值,从而实现数据绑定

js代码

Page({
    /**
   * 页面的初始数据
   */
    data:{
        mrData:[
            [{name:'小浪花'},{name:'大浪花'}],
            [{name:'小酸奶'},{name:'大酸奶'}],
        ]
    }
    /**
   * 页面上拉触底事件的处理函数
   */
    onReachBottom:function(){
         var that = this;
         wx.request({
             url:'',     
             data:{},   
             success:data=>{
                  that.setData({
                      [`mrData[${that.data.mrData.length}]`] : data
                  })
             } 
         })
    }

HTML代码,循环

<block wx:for="{{mrData}}">
  <block w:for="{{item}}" wx:for-item='row' wx:for-index='ind'>
    <view data-key='{{ind}}'>{{row.name}}</view>
  </block>
</block>

相关文章

网友评论

      本文标题:小程序防止加载大量数据导致卡顿

      本文链接:https://www.haomeiwen.com/subject/edjnzqtx.html