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

这篇具有很好参考价值的文章主要介绍了微信小程序 操作完当前页面会,自动返回上一级页面,上一级页面自动刷新。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

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

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页面中文章来源地址https://www.toymoban.com/news/detail-614242.html

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

到了这里,关于微信小程序 操作完当前页面会,自动返回上一级页面,上一级页面自动刷新的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序重新加载当前页面、刷新当前页面

    重新加载页面 使用wx.reLanuch(),url: 路径当前页面跳转, 页面所有数据重新初始化,已配置的数据不会保存 reLanuch()的方法,会有一个闪屏,加载页面动画,如果不想要可以用下面的方法。 刷新页面,不重置数据 使用this.onLoad()或者this.onShow(),  根据需要可以在onLoad,onShow,写

    2024年04月09日
    浏览(44)
  • 微信小程序如何刷新当前页面

    微信小程序是一种快速发展的移动应用程序开发平台,它提供了许多功能和特性,使开发者能够轻松创建功能丰富的小程序。在开发小程序时,有时我们需要刷新当前页面来更新数据或重新加载页面内容。本文将解释如何在微信小程序中刷新当前页面的代码。 微信小程序的流

    2024年02月07日
    浏览(47)
  • 微信小程序实现当前页面更新上一个页面

    日常项目中需要实现的一个价格脱敏功能:通过点击页面二中的 查看完整信息 点击 回退按钮 实现页面一中的价格显露出来 通过查询了大量资料发现 大多数都是通过 调用上一个接口的onload 或者onshow 实现视图更新 经测试后 发现 无法实现 只能更改数据 无法更新视图 实现方

    2024年02月13日
    浏览(33)
  • uniapp开发小程序,当二级页面返回一级页面时,触发一级页面的事件或者更新一级页面的某项数据

    二级页面代码: 有人部分博客获取上一页信息是通过这样获取的:var targetPage = pages[pages.length - 2],我这样获取显示undefined,大家可以把ages打印一下,看看内容,然后自行选择 注解: getCurrentPages() 方法来获取当前页面栈 $vm 是指Vue组件实例 一级页面代码: 每次页面切换就会

    2024年02月12日
    浏览(37)
  • 微信小程序当前页面不可转发如何解决

    1、微信小程序当前页面不可转发如何解决 1、当小程序当前页面不可转发时,首先查看当前文件的js文件中,是否添加了 onShareAppMessage 事件,若没有,则不能正常转发,这时添加上 onShareAppMessage 事件即可 或者通过 onShareAppMessage 函数设置分享标题等信息

    2024年02月13日
    浏览(29)
  • 微信小程序刷新(重载)当前页面的方法,超简单~

    在实际开发过程中,我们经常需要重新加载或者刷新当前页面,其实非常简单,仅需要两步即可完成。 1、wxml 文件 按钮绑定点击事件,随便起个函数名,如:sx 2、 js 文件 实现sx函数,调用本页的onLoad()函数即可 就是这么简单!

    2024年02月11日
    浏览(34)
  • 【微信小程序】通过调用 wx.navigateBack() 方法来退出当前界面并返回上一个界面

    在点击某个按钮或执行某个条件时触发,示例代码: 在这个示例中, delta 参数指定了要返回的界面数。如果你只想返回上一个界面,可以将 delta 设置为 1。如果你想返回更多的界面,可以增加 delta 的值。 在小程序中,tabBar 页面的返回操作与非 tabBar 页面有所不同。通常,

    2024年02月13日
    浏览(38)
  • uniapp,转微信小程序,获取当前页面的 路由、路由参数

    uniapp 获取当前路由信息跟 vue 不同,它没有 route 对象。 uniapp 转成小程序后是这样的 当前页面展示的路由信息就是上一条中获取到的 pages 的最后一条路由,即 它的内容是: 当前路由的参数 在 currentRoute.options 中 比如 index?type=diarydiaryid=123 的 options 就是 而 当前页面的完整路

    2024年02月14日
    浏览(54)
  • 微信小程序返回上一页面并更新的数据

    微信小程序开发过程中经常把当前页面数据传递给上一个页面,wx.navigateBack()返回上一页,无法传递数据,页面视图没有响应。其中一个办法就是巧妙利用页面栈。 getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素

    2024年02月11日
    浏览(43)
  • uni-app微信小程序,在页面顶部添加返回按键,返回上一个页面

    1.示例: 2.实现方式: 在page.json文件中的style里添加如下代码: 3.tips: 在page.json中的页面顺序就是小程序加载过程中的页面顺序

    2024年02月12日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包