微信小程序操作当前页面后返回上一级并自动刷新上一级页面数据

朴灿烈づ我的快乐病毒、 2023-07-25 09:24 149阅读 0赞

微信小程序的页面是由onLoad（页面加载）、onReady（页面初次渲染完成）、onShow（页面显示）、onHide（页面隐藏）、onUnload（页面卸载）五个周期构成；

实现返回上一页的时候其实是直接将隐藏的页面再显示出来，所以不存在页面的再次加载，

A页面 ——> B页面——>返回A页面（更新A页面数据）

解释：在A跳转B的过程实现是A页面隐藏，B页面初始化渲染； 返回过程是隐藏B页面显示A页面

第一种方法 ：在A页面的onshow生命周期函数中更新数据

  1. onLoad(){
  2.     //数据的初始化操作
  3.     init(){
  5.     }
  6. },
  8. onShow() { //返回显示页面状态函数
  9.     //错误处理
  10.     //this.onLoad()//再次加载，实现返回上一页页面刷新
  11.     //正确方法
  12.     update(){
  13.         console.log('我更新啦')
  14.     }
  15. }

ps： 在onShow中执行this.onLoad()，会导致页面第一次加载的时候数组加载两次！
造成原因：页面加载先执行onLoad，再执行的onShow，就会出现在onLoad加载一次数据，在onShow中执行this.onLoad()在加载一次数据。
解决办法：将不需要刷新的数据放在onLoad中执行，将需要刷新的数据放在onShow中执行！

第二种方法 ：推荐使用的
在B页面中

//例如点击操作 触发下面的函数 bindtap=”handleClick”

  1. goBack(){
  2.     let pages = getCurrentPages();   //获取小程序页面栈
  3.     let beforePage = pages[pages.length -2];  //获取上个页面的实例对象
  4.     beforePage.setData({      //直接修改上个页面的数据（可通过这种方式直接传递参数）
  5.       txt:'修改数据了'
  6.     })
  7.     beforePage.go_update();   //触发上个页面自定义的go_update方法
  8.     wx.navigateBack({         //返回上一页  
  9.       delta:1
  10.     })
  11. },

在A页面中

  1. //更新本页面
  2.   go_update(){
  3.     console.log('我更新啦')
  4.   },

发表评论

表情：
评论列表 （有 0 条评论，149人围观）

还没有评论，来说两句吧...

相关阅读