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

小程序防止加载大量数据导致卡顿,转自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>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一. Java基础部分.................................................
    wy_sure阅读 9,298评论 0 11
  • 每天的学习记录,可能有的地方写的不对,因为刚学,以后发现错的话会回来改掉整体流程 https://develope...
    有点健忘阅读 10,334评论 0 7
  • 雨后的公园,柳眉儿落了。 每次看到它们,脑海里就立刻联想起出八五年《少年文艺》里,掀起早恋开篇的《柳眉儿落了》。依...
    嘟嘟熊的玩美时光阅读 5,506评论 0 0
  • 1.ajax异步和跨域 2.MVVM模式介绍 3.回调地域问题及解决方案(会牵扯到promise,async,ge...
    足够幸运阅读 1,670评论 0 0
  • 品读亲情,接受洗礼 音符写梦 2015-2-24 6:54 正月 走亲访友 眼睛看到的 耳朵听到的 嘴里叨念的 脑...
    如伊老师阅读 1,756评论 0 1

友情链接更多精彩内容