您当前的位置: 首页 > 解决方案

微信小程序利用setData对列表进行局部刷新超详细

  • 作者: admin
  • 发布于 2018-12-15 09:28:43
  • 来源:  
  • 栏目:解决方案

导语: 之前写的一篇利用setData进行局部渲染的文章,有些朋友可能看的不是很明白,那篇文章写的可能也有一些问题,今天我就把那篇文章重新

 

之前写的一篇利用setData进行局部渲染的文章,有些朋友可能看的不是很明白,那篇文章写的可能也有一些问题,今天我就把那篇文章重新做一个详细解说,希望大家都能看的明白。 
看这篇文章的小伙伴肯定是遇到了这些问题,在一个上拉加载的列表中,想对某一条数据进行操作。但是又不想刷新整个列表。如果有html的dom操作的话大家都不会觉得有问题。其实这种双向数据绑定的方法也是能很轻松的解决此类问题。现在就开始吧。

 
  1. data:{
  2. List:[],//这里是存放整个列表的数组
  3. INDEX:1,//这里是存放操作某条数据的下标
  4. pg:1,//这里是存放操作某条数据当前所在的页数
  5. page:1,//这个是上拉加载的页数
  6. dataID:-1,//这个是存放操作某条数据的id,用来匹配数据。
  7. offon:true//这个是上拉加载的开关
  8. }
  9. // 操作删除,点赞
  10. setLike: function(e) {
  11. //wxml中传值data-index data-id
  12. service_common.fetchData(service_common.getUrl("Love"), {////这里是封装好的请求,参考小程序wx.request({})
  13. id: e.currentTarget.dataset.id//点赞哪一条
  14. }, (res) => {
  15. if (res.data.code == 0) {//请求成功,具体参考服务器返回的状态码
  16. var page = Math.ceil(e.currentTarget.dataset.index / 15) //取页数 向上取整
  17. if (page == 0) {//针对下标为0的操作
  18. page = 1
  19. }
  20. //将下标和id赋值到变量dataID,INDEX,后面会用到
  21. this.setData({
  22. dataID:e.currentTarget.dataset.id,
  23. INDEX: e.currentTarget.dataset.index
  24. })
  25. this.getWrqList(page, 0)//带过去的参数页数,page是操作的数据当前所在的页数,0是代表我要局部渲染,获取数据的时候进行判断(-1:正常逻辑操作。0:局部渲染)
  26. }
  27. }, "GET");
  28. },
  29. getData:function(pg=this.data.page,ty=-1){//页数默认是page,pg只有在操作数据的时候才会使用到,ty默认等于-1,否则就是操作某条数据需要进行局部渲染操作。
  30. service_common.fetchData(service_common.getUrl("getDataList"), {//这里是封装好的请求,参考小程序wx.request({})
  31. page: pg
  32. }, (res) => {
  33. if (res.data.code == 0) {//数据请求成功,具体参考服务器返回的状态码
  34. if (ty == -1) {//-1正常逻辑操作
  35. if (this.data.page == 1) {//如果是第一页,直接替换掉List
  36. this.setData({
  37. List: res.data.data
  38. })
  39. } else {
  40. //如果是1+页需要用concat进行数组合并,组成新的数组,赋值给List
  41. if (res.data.data.length == 0) {
  42. if (this.data.List.length >= 10) {//为了防止只有几条数据就会弹出来这个提示,所以建议List数据大于10条才弹出
  43. wx.showToast({
  44. title: '数据加载完成',
  45. })
  46. }
  47. } else {
  48. //上拉加载后数组合并
  49. this.data.List= this.data.List.concat(res.data.data)
  50. this.setData({
  51. List: this.data.List,
  52. offon:true
  53. })
  54. }
  55. }
  56. } else {
  57. //0走操作单条数据,需要局部渲染操作
  58. for (var i in res.data.data) {//循环获取到对应页数的数据,循环查找相对应id的数据,这条数据就是最新的,
  59. if (res.data.data[i].id == this.data.dataID) {
  60. //res.data.data[i]就是最新获取的数据,替换掉原来List[index]的数据
  61. this.setData({
  62. [`demandList[${this.data.INDEX}]`]: res.data.data[i]
  63. })
  64. //结束
  65. return
  66. }
  67. }
  68. }
  69. }
  70. }, "GET");
  71. },
  72. // 触底操作
  73. onReachBottom: function() {
  74. if (this.data.offon){//是否还可以下拉刷新
  75. this.data.offon=false//默认关闭下拉刷新,请求成功后自动开启
  76. this.data.page += 1
  77. this.setData({
  78. page: this.data.page,
  79. offon: this.data.offon
  80. })
  81. this.getData()
  82. },

下面给一下wxml的简易代码

 
  1. <image src="/image/like.png" bindtap='setLike' data-index="{{index}}" data-id="{{item.id}}"></image>

原版地址 
这次我介绍的可能还有不足的地方,小伙伴们可以给我留言,我会补足,希望对大家能有帮助。



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部