最近在做一个翻页交互,遇到点setData的坑,最后想了个办法给绕过去了,但我不知道各位有没有更好的办法,在这里分享下我的处理办法;
例如我有个列表,这个列表的总数据量不确定有多少,经我们产品交代,大促期间,至少会有1000条,从小程序的开发文档里可以看到setData对数据的限制是1024KB,因为之前我看文档时没有注意到这一点,所以我一开始在做分页的时候就用了错误的方法,上代码:
wxml:
wx:for = "{{skuList}}" skuData = "{{item}}" actId = "{{actId}}"
|
js:
skuList: [] }, loadMore: function () { request( function (res) { this .setData({ skuList: this .data.skuList.concat(res.list) }); })
|
好,这样写,问题就出来了,当数据量慢慢的累积起来,就会触发1024KB阈值,后面的数据就算能取回来,也set不进去了。
于是我想了一个解决方案:
把之前的渲染流程拆成两步来做,第1步: 先想办法把每页的坑位给渲染出来,于是我搞了一个skuPage组件, 在这个组件中来单独做每页的sku渲染:
wxml:
wx:for = "{{skuList}}" skuData = "{{item}}" actId = "{{actId}}"
|
js:
skuList: [] }, methods: { setListData: function () { let _this = this ; this .setData({ skuList: app.globalData.skuList }); app.globalData.skuList = []; } }, ready: function () { this .setListData();
|
在外部页面中调用skuPage组件:
wxml:
class = "sku-page" wx:for = "{{pageWrapCount}}" wx:key = "{{index}}"
|
js:
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上线,因为每次针对于坑位来说
pageWrapCount: this .data.pageWrapCount.concat([1])
|
我只对pageWrapCount数组push(1); 就算有1024KB限制,那也远远足够了,除了此种办法外,各位还有更好的办法么?欢迎共享经验
不用这么麻烦吧,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++
多谢,有时间我试试,不知道是不是最近加的这个API,也有可能是我之前没仔细看文档吧。
大神,触底做循环setData,比如说1次加载10条,就执行10次setData吗?我是萌新,求帮助
你可以将一次请求的数据10条作为一个数组,setData一次就可以,尽量减少setData的次数与大小
感谢,已经根据这个思路实现了我想要的逻辑,再次感谢
这只能绕过1024的机制,但小程序对页面的数据量是有限制的,触发了这个上限,微信会把你的小程序给杀掉
谢谢大神分享
像这种的话,其实 写好翻页组件, 设置好item的样式,复用起来很容易
我自己整合了一个插件 refresh, 里面的数据源是 一个 二维数组 data[x][y] x代表的是页数 y代表的是每一页的数据 ,that.setData({
['data['+x+']']: resData
})
其实就能实现 翻页加载,
老铁 没有看的太明白呢
感谢分享
感谢大佬分享,这个方案本质上就是把单层一次性渲染变成双层分批次渲染,如果再加上可视区检测占位的方案估计就能完美实现“无限”滚动了
谢谢分享
我们的数据多的时候可能成百万上千万,但是用户大部分时间也只关注前几页的内容,甚至就是第一页的内容。
好吧,哈哈