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

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

问题描述

列表的局部更新在页面数据量大的情况下还是很重要的。
在一个列表中,有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>
posted @ 2020-02-01 14:38  LSKReno  阅读(760)  评论(0编辑  收藏  举报