收藏
评论

在setData1024KB限制下如何做到无限翻页列表交互?

最近在做一个翻页交互,遇到点setData的坑,最后想了个办法给绕过去了,但我不知道各位有没有更好的办法,在这里分享下我的处理办法;

例如我有个列表,这个列表的总数据量不确定有多少,经我们产品交代,大促期间,至少会有1000条,从小程序的开发文档里可以看到setData对数据的限制是1024KB,因为之前我看文档时没有注意到这一点,所以我一开始在做分页的时候就用了错误的方法,上代码:

wxml:


<sku-item

   wx:for="{{skuList}}"
   skuData="{{item}}"
   actId="{{actId}}"

   wx:key="{{item.skuid}}"/>


js:


data: {

   skuList: []
},
loadMore: function() {
   request(function(res) {
       this.setData({
           skuList: this.data.skuList.concat(res.list)
       });
   })

}



好,这样写,问题就出来了,当数据量慢慢的累积起来,就会触发1024KB阈值,后面的数据就算能取回来,也set不进去了。

于是我想了一个解决方案:

把之前的渲染流程拆成两步来做,第1步: 先想办法把每页的坑位给渲染出来,于是我搞了一个skuPage组件, 在这个组件中来单独做每页的sku渲染:

wxml:


<sku-item

   wx:for="{{skuList}}"
   skuData="{{item}}"
   actId="{{actId}}"

   wx:key="{{item.skuid}}"/>

js:


data: {

   skuList: []
},
methods: {
   setListData: function () {
       let _this = this;
       this.setData({
           skuList: app.globalData.skuList
       });
       app.globalData.skuList = [];
   }
},
ready: function() {
   this.setListData();

}



在外部页面中调用skuPage组件:

wxml:


<sku-page

   class="sku-page"
   wx:for="{{pageWrapCount}}"
   wx:key="{{index}}"

   actId="{{actId}}"/>

js:


data: {

   pageWrapCount: []
},
loadMore: function() {
   app.globalData.skuList = res.list;
   request(function(res) {
       this.setData({
           pageWrapCount: this.data.pageWrapCount.concat([1])
       });
   })

}


好,这样我们把取回的数据先不要立马set进去,而是把它先丢在global里,然后让坑位+1,这样skuPage就会新增一个,就会触发skuPage的ready钩子函数,这个时候再在skuPage的ready钩子中,从global中把list取过来丢给skuPage组件的skuList,让skuPage组件去渲染,这样就能绕开setData的1024KB上线,因为每次针对于坑位来说



this.setData({

  pageWrapCount: this.data.pageWrapCount.concat([1])

});



我只对pageWrapCount数组push(1); 就算有1024KB限制,那也远远足够了,除了此种办法外,各位还有更好的办法么?欢迎共享经验

最后一次编辑于  2018-05-25  (未经腾讯允许,不得转载)
复制链接收藏赞 11

24 个评论

  • 陈
    2018-05-25

    谢谢大神分享

    2018-05-25
    赞同 2
    回复
  • 攀
    2018-07-23

    感谢,已经根据这个思路实现了我想要的逻辑,再次感谢

    2018-07-23
    赞同 1
    回复 1
    • ོ
      2018-07-25

      这只能绕过1024的机制,但小程序对页面的数据量是有限制的,触发了这个上限,微信会把你的小程序给杀掉

      2018-07-25
      回复
  • 小程序@小萝卜报名
    小程序@小萝卜报名
    2018-08-05

    不用这么麻烦吧,setData()的文档中是支持动态添加的(但也有可能是最近才支持的)


    https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html#pageprototypesetdataobject-data-function-callback




    所以触底的时候,只要做个循环:

    setData({ List[length]: '额外的node'}) 然后 length++ 就好了


    而且ES6是支持计算属性的,即

    var key = 'List['+length+']'

    setData({ [key]: '额外的node'})

    length++

    2018-08-05
    赞同 1
    回复 3
    • ོ
      2018-08-07

      多谢,有时间我试试,不知道是不是最近加的这个API,也有可能是我之前没仔细看文档吧。

      2018-08-07
      回复
    • 大昌[强]
      大昌[强]
      2018-08-16

      大神,触底做循环setData,比如说1次加载10条,就执行10次setData吗?我是萌新,求帮助

      2018-08-16
      回复
    • 爱本无心
      爱本无心
      2018-08-24回复大昌[强]

      你可以将一次请求的数据10条作为一个数组,setData一次就可以,尽量减少setData的次数与大小

      2018-08-24
      回复
  • 清欢°
    清欢°
    2018-05-25

    谢谢大佬分享

    2018-05-25
    赞同
    回复
  • null
    null
    2018-05-27

    谢谢大佬分享

    2018-05-27
    赞同
    回复
  • kit
    kit
    2018-05-29

    怎么不去做page动态变化呢? 比如page=3, 则取个渲染子集[3n, 4n-1]

    2018-05-29
    赞同
    回复 1
    • ོ
      2018-05-29

      这个列表的翻页,并没有页码选择器,是不断的往下滑,如果按照你这样处理方式,页面会不会出现闪烁现象?但你这个方案是可行的。

      2018-05-29
      回复
  • sun
    sun
    2018-05-31

    谢谢分享,以前做分页都没注意到这个大小的限制

    2018-05-31
    赞同
    回复 3
    • ོ
      2018-05-31

      那你赶紧测一下,你的分页有没这个问题

      2018-05-31
      回复
    • sun
      sun
      2018-05-31回复

      信息量返回没达到上限,一般都只是1300多条

      2018-05-31
      回复
    • ོ
      2018-06-01回复sun

      主要是看数据体大不大,我们500条数据的数组,就超过1024了,每个json的字段都很多

      2018-06-01
      回复
  • Jedore
    Jedore
    2018-05-31

    厉害了,不过如果是scrollview的话,这个方案不太行吧,没法同一个滚动条去控制。

    2018-05-31
    赞同
    回复
  • @哈
    @哈
    2018-06-01

    我们的数据多的时候可能成百万上千万,但是用户大部分时间也只关注前几页的内容,甚至就是第一页的内容。

    2018-06-01
    赞同
    回复 1
    • ོ
      2018-06-01

      好吧,哈哈

      2018-06-01
      回复
  • 南风
    南风
    2018-06-04

    谢谢分享

    2018-06-04
    赞同
    回复