微信小程序列表局部(单条)刷新

问题背景

在小程序列表中，对某一条点赞，成功后setData修改点赞数量，接口请求成功回调如下

success: res => {
  this.data.posters[index].like_sum = parseInt(this.data.posters[index].like_sum) + 1;
  this.setData({
    poster: this.data.posters
  })
},

此处的index是在wxml中for循环的index偏移下标，绑定到节点数据：
data-index="{{index}}"
wxs中通过点击事件获取 ：
var index = parseInt(event.currentTarget.dataset.index);
这里不做赘述

发现页面向上或向下移动了一定距离，如gif图所示：

想了想应该是因为setData整个posters数组后，重新渲染了整个列表，每条数据的图片重新渲染尺寸时对页面产生了一定影响，导致列表抖动了位置。

那么如何解决呢？

处理办法

在setData时写成如下样子即可只刷新指定节点，不会导致整个列表都重绘：

this.setData({
 //poster: this.data.posters, //原来这样写的
 ["posters[" + index + "]"]: this.data.posters[index], //换成这样可局部刷新
})

只需更换一行代码即可。

如对您有帮助，不妨点赞关注一波～