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

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

微信小程序页面更新数据是通过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);})

知秋君
没有上一篇了
下一篇 2024-07-03 15:31

相关推荐