微信小程序列表数据的局部刷新

Java架构师必看

发布于 2020-04-10 09:58:37

2.4K0

发布于 2020-04-10 09:58:37

微信小程序页面更新数据是通过setData实现的，通常有很多列表数据的页面（应用场景），比如在一个购物车列表页面，可以添加/减少商品数量，可以删除一个商品......如果每增加一个商品数量就全局刷新整个列表，其实是没有这个必要的，使用局部刷新就可以帮助提高性能。

let num = this.data.serviceList[index].services[pos].count;
this.setData({
  ["serviceList[" + index + "].services[" + pos + "].count"]: num + 1
})

局部刷新.png

比如说上拉加载更多，请求到数据后要添加到数组中，局部刷新的实现方式为：

let param=  {pageIndex: this.data.pageIndex};
var that = this;
app.HttpClient.request(url, param, function(res){
  let list = res.data;
  let index = that.data.serviceList.length;
  let data = that.data;  
  list.forEach((item)=>{
    data['serviceList[' + (index++) + ']'] = item;
  });
  that.setData(data);
})

本文由来源 17，由 system_mush 整理编辑，其版权均为 17 所有，文章内容系作者个人观点，不代表 Java架构师必看对观点赞同或支持。如需转载，请注明文章来源。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

java