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

论坛 期权论坛 编程之家     
选择匿名的用户   2021-6-2 16:01   1770   0

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

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

A页面 ——> B页面——>返回A页面(更新A页面数据)

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

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

onLoad(){
    //数据的初始化操作
    init(){

    }
},

onShow() { //返回显示页面状态函数
    //错误处理
    //this.onLoad()//再次加载,实现返回上一页页面刷新
    //正确方法
    update(){
        console.log('我更新啦')
    }
}
ps: 在onShow中执行this.onLoad(),会导致页面第一次加载的时候数组加载两次!
造成原因:页面加载先执行onLoad,再执行的onShow,就会出现在onLoad加载一次数据,在onShow中执行this.onLoad()在加载一次数据。
解决办法:将不需要刷新的数据放在onLoad中执行,将需要刷新的数据放在onShow中执行!

第二种方法 :推荐使用的

在B页面中

//例如点击操作 触发下面的函数  bindtap="handleClick"
handleClick(){
    let pages = getCurrentPages();   //获取小程序页面栈
    let beforePage = pages[pages.length -2];  //获取上个页面的实例对象
    beforePage.setData({      //直接修改上个页面的数据(可通过这种方式直接传递参数)
      txt:'修改数据了'
    })
    beforePage.go_update();   //触发上个页面自定义的go_update方法
    wx.navigateBack({         //返回上一页  
      delta:1
    })
},

在A页面中

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

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP