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

 

目录

项目所需

原生写赖加载存在的bug

解决问题思路及代码实现

思路：

代码实现：

列表.wxml

 列表.js

Wenjain_shanchu.js

Wenjain_shanchu.json

Wenjain_shanchu.wxml

shouye.js

 ⭐️ 好书推荐

【内容简介】 

---

项目所需

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

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

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

 ⭐️ 好书推荐

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

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

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

【内容简介】 

 《Vue.js从入门到精通》从初学者角度出发，通过通俗易懂的语言、丰富多彩的实例，详细介绍了使用Vue.js进行程序开发需要掌握的各方面技术。全书分为4篇，共19章，内容包括初识Vue.js、ECMAScript 6语法介绍、Vue实例与数据绑定、条件判断指令、v-for指令、计算属性和监听属性、元素样式绑定、事件处理、表单元素绑定、自定义指令、组件、组合API、过渡和动画效果、渲染函数、使用Vue Router实现路由、使用axios实现Ajax请求、Vue CLI、状态管理，以及51购商城项目实战。书中的大多数知识点都结合具体实例进行介绍，涉及的程序代码给出了详细的注释，使读者可轻松领会Vue.js程序开发的精髓，快速提高开发技能。

📚 京东购买链接:https://item.jd.com/14055952.html