微信小程序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.   })


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM