微信小程序列表局部(單條)刷新

問題背景

在小程序列表中，對某一條點贊，成功後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], //換成這樣可局部刷新
})

只需更換一行代碼即可。

如對您有幫助，不妨點贊關注一波～