干掉微信小程序-列表(分页)的局部更新

干掉微信小程序-列表(分页)的局部更新

问题描述

列表的局部更新在页面数据量大的情况下还是很重要的。
在一个列表中，有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>