您现在的位置是:首页 > 技术教程 正文

微信小程序 操作完当前页面会,自动返回上一级页面,上一级页面自动刷新

admin 阅读: 2024-04-01
后台-插件-广告管理-内容页头部广告(手机)

1:小程序页面有5个声明周期: 是由onLoad(页面加载)、onReady(页面初次渲染完成)、onShow(页面显示)、onUnload(页面卸载)  

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

A页面------》B页面--------》返回A页面(自动更新A页面的数据)

3:A跳转B的过程是实现A页面隐藏,B页面初始化渲染;返回过程是隐藏页面B页面  显示A页面

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

  1. onLoad(){
  2. //数据的初始化操作
  3. init(){
  4. }
  5. },
  6. onShow() { //返回显示页面状态函数
  7. //错误处理
  8. //this.onLoad()//再次加载,实现返回上一页页面刷新
  9. //正确方法
  10. update(){
  11. console.log('--更新数据--')
  12. }
  13. }
  14. 注意: 在onShow中执行this.onLoad(),会导致页面第一次加载的时候数组加载两次!
  15. 造成原因:页面加载先执行onLoad,再执行的onShow,就会出现在onLoad加载一次数据,在onShow中执行this.onLoad()在加载一次数据。
  16. 解决办法:将不需要刷新的数据放在onLoad中执行,将需要刷新的数据放在onShow中执行!

第二种方法:推荐使用 

在B页面

  1. //操作函数 已经在wxml页面进行了事件绑定 bindtap="onClick"
  2. onClick(){
  3. let pages=getCurrentPages(); //获取当前页面
  4. let beforePage=page[pages.length-2] //获取上一个页面的实例
  5. //修改上一个页面的响应式数据
  6. beforePage.setData({
  7. userInfo:'我是超人'
  8. })
  9. beforePage.getuserInfo() //getuserInfo() 上一个页面我定义的函数,此处我要让他刷新
  10. //返回上一个页面
  11. wx.navigateBack({
  12. delta:1
  13. })
  14. }

在A页面中

  1. getuserInfo(){
  2. console.log('我更新啦')
  3. }

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索
排行榜