小程序赖加载刷新数据页面数据堆叠问题debug

淼学派对

发布于 2023-10-14 11:22:10

2260

发布于 2023-10-14 11:22:10

文章被收录于专栏：云开发小程序1云开发小程序1

项目所需

某高校大一新生入学，学校的综合服务站小程序上传文件的列表支撑前端页面支撑不了成千上万条的渲染。

所以，决定将直接列表加载换成赖加载。

原生写赖加载存在的bug

使用原生来创建一个赖加载是不错的选择，但是遇到了一个问题，就是小程序的onshow和onload生命周期钩子，无论使用哪一个钩子都会存在数据刷新之后数据堆叠的问题。

解决问题思路及代码实现

思路：

我们使用懒加载时，一般会套用者数据的增删改查一起使用，比如：使用赖加载列数据之后，想实现每一条数据的删除之后刷新数据，这个时候就不能够使用正常的onshow或者onload生命钩子实现。

我们这时候要使用列表页面点击删除时跳到二级页面实现删除数据的同时，在二级页面使用getCurrentPages（）函数获取到小程序页面栈，然后通过pages.length来获取上一个页面的实力对象，在通过beforePage方法修改上一个页面的数据，并结合着beforePage方法调用上一个页面的自定义方法，在使用正常的wx.navigateBack返回上一个父级页面并携带一个自定义的参数，这时候需要在父级页面上创建对话框事件，实现返回到此父级页面的上一个页面，然后再从此父级页面的上一个页面的onload生命钩子函数中做判断，如果孙页面的参数存在且判断正确，则自动执行跳到列表页面，从而解决赖加载结合数据的增删改查之后的数据在列表页面的堆叠问题！

代码实现：

列表.wxml

赖加载时候的数据删除

这里的item里面的_id是js中赖加载完成的数据列表

<navigator style="height: 50rpx;" url="../Wenjain_shanchu/Wenjain_shanchu?Wenjain_shanchu_id={{item._id}}" slot="right">删除</navigator>

列表.js

  onShow() {
    if (this.data.txt == 1) {
      wx.showModal({
        title: '删除成功！',
        content: '是否自动重新进入此页面完成刷新！',
        success(res) {
          if (res.confirm) {
            console.log('用户点击确定')
            wx.reLaunch({
              url: '../shouye/shouye?wenjian='+'yonghu',
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    }
  },

Wenjain_shanchu.js

  Queding(){
    let that = this
    wx.cloud.database().collection('wenjian').doc(that.options.Wenjain_shanchu_id).remove({
        success(res){
            console.log(res)
            wx.showToast({
              title: '删除成功！',
            })
            let pages = getCurrentPages();   //获取小程序页面栈
            let beforePage = pages[pages.length -2];  //获取上个页面的实例对象
            beforePage.setData({      //直接修改上个页面的数据（可通过这种方式直接传递参数）
              txt:1
            })
            beforePage.go_update();   //触发上个页面自定义的go_update方法
            wx.navigateBack({         //返回上一页  
              delta:1
            })
        }
    })
  },

  onLoad(options) {
    console.log(options.Wenjain_shanchu_id)
    Dialog.confirm({
      title: "再次确定您是否要删除",
      message:'\n\n',
      customStyle:'width:500rpx;border-radius: 20rpx;padding:20px;display: flex;flex-direction: column;font-size:20px',
      // theme:'round-button',
     }).then(() => {
      // on close
     });
    
  },

Wenjain_shanchu.json

{
  "usingComponents": {
    "van-dialog": "@vant/weapp/dialog/index"
  }
}

Wenjain_shanchu.wxml

<van-dialog bind:confirm="Queding"bind:cancel="Quxiao" id="van-dialog" />

shouye.js

  onLoad(options) {
    console.log(options,'111')
    if(options.wenjian == 'yonghu'){
      wx.navigateTo({
        url: '../My_wenjain/My_wenjain',
      })
    }
  },

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-09-13，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序