微信小程序setData局部刷新列表

利用setData局部刷新列表

当列表管理加载到第几页时，这个list的数据有十几条的，如果重新setData的话就要重新刷新和渲染列表，

这是个比较麻烦的事，当数据量大时，就会造成白屏，

这时就要局部刷新列表，而且大量数据使用setData是有性能影响的。

这时就要进行局部刷新了

 

比如：分页加载，删除某一条记录，这时就要重新加载列表，回到第一页，当频繁操作删除时，就比较恶心了

这时我们可以利用标记，和隐藏记录

通过点击获取列表的索引index,进行删除请求成功后将其隐藏即可，不用全部刷新列表，也不用回加第一页

 

1. let index = e.currentTarget.dataset.index;

2. this.setData({

3. 　　['list['+index+'].isDelete']: 1

4.  })

 

通过局部更新列表项的isDelete参数来隐藏该项

页面上使用 

 <view class='item' wx:if='{{!item.isDelete}}'></view>

来控制显示。

 

通过上面局部刷新页面的方式，可以做大量的相识的操作，如商品上下架的状态，等

 

1.    wx.showModal({

2.           title: '提示！',

3.          content: '是否删除该商品？',

4.          success: res =>{

5.             if (res.confirm) {

6.                 let index = e.currentTarget.dataset.index;

7.                this.setData({

8.                 　　 ['list['+index+'].isDelete']: 1

9.                   })

10.          }

11.        }

12.   })