小程序setData()超限怎么办

最近在做一个翻页交互，遇到点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限制，那也远远足够了