微信小程序返回上一页面并更新的数据

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

微信小程序开发过程中经常把当前页面数据传递给上一个页面,wx.navigateBack()返回上一页,无法传递数据,页面视图没有响应。其中一个办法就是巧妙利用页面栈。

getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面。

重点:在当前页面拿到上一个页面的实例对象,然后调用该对象的方法完成数据传递。

上一个页面

Page({
     data: {
        name: ''
     },
     ...
     //定义更新name方法
     changeData: function(name){
        this.setData({
            name: name
        })
     }
})

当前页面:在文本框输入姓名,点击按钮后更新上一个的name

<view>
  <!-- 数据双向绑定 -->
  <input model:value="{{value}}"/>
  <button bindtap="change">修改name并返回</button>
</view>
Page({
    data{
        value:''
    },
    //按钮点击回调函数
    change: function () {
        //获取页面栈
        let pages = getCurrentPages();
        //检查页面栈
        //console.log(pages);
        //判断页面栈中页面的数量是否有跳转(可以省去判断)
        if(pages.length > 1){
            //获取上一个页面实例对象
            let prePage = pages[pages.length - 2];
            //调用上一个页面实例对象的方法
            prePage.changeData(value);
            //返回上一个页面
            wx.navigateBack();
        }
    }
})

注意:页面跳转需要使用wx.navigateTo跳转。文章来源地址https://www.toymoban.com/news/detail-504112.html

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

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

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

相关文章

  • 微信小程序阻止用户返回上一页,并弹窗给用户确定是否要返回上一页

    在onload中调用微信的enableAlertBeforeUnload方法,在首次进入会自动监听当前的页面,在返回的时候会自动弹出弹窗阻止用户返回上一页,点击确定则返回上一页,取消则停留在当前页

    2024年02月07日
    浏览(48)
  • 微信小程序返回上一级页面并自动刷新数据

    界面由A到B,在由B返回A,触发刷新动作 界面A代码 界面B代码 代码如下(示例): 在小程序环境中对应页面的 onShow。 页面显示/切入前台时触发。 Taro React生命周期函数

    2024年03月24日
    浏览(61)
  • uniapp、小程序选择数据后携带数据返回上一页且不刷新页面

    优先推荐方法三 图示: 从新建线索页面A跳转到选择线索页面B,然后选择相应线索之后再返回新建线索页面,且原来的表单数据不能丢失 方法一:使用uni.$emit  利用这个方法可以往uni这个对象身上添加自定义事件,然后通过uni.$on方法在生命周期onShow里面去触发事件,通过触

    2024年02月15日
    浏览(41)
  • 微信小程序--操作微信自带的返回按钮使上个页面刷新列表或刷新数据

    首先要了解什么是 页面栈 ------------ 框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候,页面栈的表现如下: 路由方式 页面栈表现 初始化 新页面入栈 打开新页面 新页面入栈 页面重定向 当前页面出栈,新页面入栈 页面返回 页面不断出栈,直到目标返回页

    2024年02月13日
    浏览(48)
  • 微信小程序页面返回操作拦截

    返回操作包括三种情形,右滑手势、安卓物理返回键和调用 navigateBack 接口 微信小程序没有提供类似 onBackPress 监听页面返回的api,在某些特定场景下,业务收到了限制 为了解决这一限制,本文提供了两种较为常用的解决方案 方案一 重写navigationBar 目的是重写左上角返回按钮

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

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

    2024年02月12日
    浏览(52)
  • uniapp微信小程序 页面返回使用navigateBack,返回后页面不刷新问题解决方案

    尝试了众多方法,比如vuex,本地缓存,都不行 1,如果是页面之间的跳转 可以使用onShow生命周期请求数据 2,组件之间的跳转,使用redirectTo,通过关闭当前页面,跳转到指定页面再加载,这种适合二级页面到三级页面数据不更新问题 3,当一级页面使用了某个组件,组件内跳转

    2024年02月15日
    浏览(59)
  • 微信小程序如何返回到上一个页面,并刷新页面呢?

    前言  小程序如何返回到上一个页面,并刷新页面呢? 在普通的html页面,很简单,不用操作都可以实现。因为浏览器返回会自动刷新。 但是小程序返回是不会自动刷新上一个页面的。所以需要一点点技巧。  入图第一个页面跳转第二个页面 在第二个页面修改数据,返回第一

    2024年02月11日
    浏览(59)
  • 在微信小程序中打开的页面不能超过10个,达到10个页面后,就不能再打开新的页面

    微信小程序路由跳转有个隐藏的坑,就是  wx.navigateTo 打开新页面,最多只能打开10个,超过10个之后就没反应,控制台也不会报错。 小程序路由跳转的方式有五种,分别是wx.navigateTo(打开新页面,新页面入栈)、wx.redirectTo(重定向,当前页面出栈,新页面入栈)、wx.naviga

    2023年04月08日
    浏览(42)
  • 微信小程序解决多级页面返回及实现返回时弹出层提示

    解决微信小程序中点击页面返回按钮时需要返回多级的问题 最初使用的方法是在页面的onUnload中再写一个wx.navigateBack()方法,基本上也能实现效果,但不太完美,会出现一些情况: 如果当前页面中有按钮需点击后跳转到其他页面时,页面会出现先返回上一页再跳转到目标页面

    2024年01月16日
    浏览(53)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包