项目所需

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

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

原生写赖加载存在的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',
      })
    }
  },

⭐️ 好书推荐

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

清华社【秋日阅读企划】领券立享优惠

IT好书 5折叠加10元无门槛优惠券：https://u.jd.com/Yqsd9wj

活动时间：9月4日-9月17日，先到先得，快快来抢