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

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

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

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

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

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

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

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

第二种方法:推荐使用 

在B页面

//操作函数  已经在wxml页面进行了事件绑定  bindtap="onClick"

onClick(){
    let pages=getCurrentPages();  //获取当前页面
    let beforePage=page[pages.length-2]  //获取上一个页面的实例
    
    //修改上一个页面的响应式数据
    beforePage.setData({
        userInfo:'我是超人'
    })
    
    beforePage.getuserInfo()    //getuserInfo()  上一个页面我定义的函数,此处我要让他刷新
    
    //返回上一个页面
    wx.navigateBack({
   
       delta:1
    })

}

在A页面中

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

转载请说明出处内容投诉
CSS教程_站长资源网 » 微信小程序 操作完当前页面会,自动返回上一级页面,上一级页面自动刷新

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买