干掉微信小程序-列表(分頁)的局部更新
問題描述
列表的局部更新在頁面數據量大的情況下還是很重要的。
在一個列表中，有n條數據，采用觸底加載更多的方式，在請求獲取到數據后。
此時，可以采用setData全局刷新。
這樣做的優點是：簡單，方便
缺點是：用戶體驗在頁面刷出大量數據后極差，由於重新渲染量極大，會出現空白期（沒有渲染過來，當然也可以采用骨架屏的方式，但是全局渲染仍然不推薦使用）。
所以，接下來說說，采用setData進行局部刷新的兩種思路。
實現方法一：
直接在列表上進行局部添加。
這種方法在wxml中需要使用單重循環。
js代碼
// 采取局部增添式下拉加載goods
let list = res.resultList;
let index = _this.data.resultList.length;
let data = _this.data;
list.forEach((item) => {
data['resultList[' + (index++) + ']'] = item;
});
_this.setData(data);
wxml代碼
<block wx:for="{{resultList}}">
<view>item.name</view>
</block>
實現方法二：
先聲明一個pages的列表，每次觸底加載后，在pages上進行局部添加。
這種方法在wxml中需要使用雙重循環。
js代碼
const pages = this.data.pages
this.setData({
[`pages[${pages.length}]`]: res.resultList,
})
wxml代碼
<block wx:for="{{pages}}" wx:key="page">
<block wx:for="{{item}}">
<view>item.name</view>
</block>
</block>