(uniapp跳转回显),A页面进入B页面,B页面返回A页面,并传值给A页面(技巧绝对好用慢慢看)

简介: (uniapp跳转回显),A页面进入B页面,B页面返回A页面,并传值给A页面(技巧绝对好用慢慢看)
!这种方法首先要理解uniapp里面的getCurrentPages()函数,自己可以打印一下就知道了
var pages = getCurrentPages();//获取所有页面的数组对象
var currPage = pages[pages.length - 1]; //当前页面
var beforePage= pages[pages.length - 2]; //上一个页面

原理

从A页面进入B页面以后,在B页面选择数据以后,通过getCurrentPages()函数得到上一个页面的实例对象,然后直接修改他的数据,在通过uni.navigateBack()函数直接返回,这里用了一个技巧就是通过uni.navigateBack()函数返回页面,不会对上一个页面进行刷新,这样就可以实现回显

例子

A页面现在有一个数据

data() {
    return {
  id: ''
    }
},

B页面选择完数据以后

var pages = getCurrentPages()
var prevPage = pages[pages.length - 2]
prevPage.$vm.id = '自己要更改的数据值'
uni.navigateBack({
  delta: 1
})

到这里已经可以实现回显了,但是!!!有坑,同时这个坑出现的概率非常小,但是会遇到,就是在B页面更改完A页面数据,返回A页面以后,A页面数据变了,但是A页面对应的数据丢失了响应式 ,会出现,数据更改了,但是页面要渲染的数据没发生改变


解决方法(一个大佬告诉我的)


就是通过动态渲染key值的方法,因为key值改变相当于对应的页面元素从新渲染,来解决这种偶然遇到的问题(因为时间戳是唯一的所以用这个)

1024b19218af40c7a8a6290c6186518d.png1024b19218af40c7a8a6290c6186518d.png


当页面每次进入的时候直接页面生命周期onshow自动调用 让对应key值变量发生改变,来从新渲染页面,这样就可以解决这个大坑


扩展知识

1024b19218af40c7a8a6290c6186518d.png


目录
相关文章
|
6月前
|
JavaScript 数据安全/隐私保护 UED
UniApp 中的路由魔法:玩转页面导航与跳转
UniApp 中的路由魔法:玩转页面导航与跳转
1619 3
|
2月前
|
API
uniapp使用路由名称跳转
【9月更文挑战第11天】在UniApp中,可通过定义路由名称实现页面跳转,需在`pages.json`中设置页面的`name`属性。使用`uni.navigateTo`等API并指定名称即可跳转,例如`name: 'detailPage'`。目标页面可在`onLoad`函数中获取传递的参数,这种方式使代码更清晰且便于维护,尤其适合大型项目。
|
1月前
|
数据可视化 API
低代码可视化-uniapp购物车页面-代码生成器
低代码可视化-uniapp购物车页面-代码生成器
24 1
|
4月前
|
移动开发 前端开发 小程序
uniapp内置组件uni.navigateTo跳转后页面空白问题解决
【7月更文挑战第1天】uniapp内置组件uni.navigateTo跳转后页面空白问题解决
117 4
|
4月前
|
小程序 UED
uniapp 添加分包页面,配置分包预下载
uniapp 添加分包页面,配置分包预下载
92 2
|
4月前
|
小程序
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
569 0
|
6月前
|
JavaScript 前端开发 小程序
uniapp中nvue页面如何全屏,map组件如何全屏?
uniapp中nvue页面如何全屏,map组件如何全屏?
374 3
|
6月前
|
移动开发 小程序 Android开发
基于jeecgboot的flowable为uniapp适配的流程页面调整
基于jeecgboot的flowable为uniapp适配的流程页面调整
156 0
|
6月前
|
小程序
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
915 0
|
6月前
|
缓存 JavaScript 小程序
uniapp 普通页面跳转到tabBar页面详解(附加代码+uni.switchTab使用)
uniapp 普通页面跳转到tabBar页面详解(附加代码+uni.switchTab使用)
508 0