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

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

作者: 涳_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