一、回退上一级页面 beforePage

返回页面同时需要刷新数据

 

var pages = getCurrentPages(); //当前页面 var beforePage = pages[pages.length - 2]; //前一页 wx.navigateBack({ success: function () { beforePage.onLoad(); // 执行前一个页面的onLoad方法 } }); 二、回退 3 级页面 wx.navigateBack

当我们页面跳转到三级页面后,点击左上角的返回按钮,能够直接返回到首页

wx.navigateBack 这个方法可以返回界面 在 onUnload 触发的时候可以执行。但是我发现这个方法确实可以回到首页,但是他会一个一个界面返回,不能直接返回到首页

onUnload:function(){ wx.navigateBack({ delta: 3 }) } 正常 A -> B -> C 都是通过 wx.navigateTo 跳转的,所以 wx.navigateBack 只能返回上一界面,如果要返回到A 界面就会出现 C -> B -> A 的效果。 如果想实现 A -> B -> C 当 C 点击返回时, 实现直接 C -> A 这种效果就只能 A -> B 通过 wx.navigateTo 跳转 B -> C 通过 wx.redirectTo 跳转,跳转触发后 B 页面就会被销毁,C 页面再返回 wx.navigateBack 就会直接到 A 了。

wx.redirectTo({ url: url }) 三、回退 4 级或者更多级页面,wx.reLaunch

 

onUnload() { console.log('返回按钮') wx.reLaunch({ url: '../../pages/index' }) } 四、返回多级页面,同时刷新

比如我们现在希望在第四级页面返回首页后刷新,我们需要在 onShow 方法中调用 onLoad() 方法

页面需要带参进来的情况

onShow() { this.onLoad({ uid: this.$parent.globalData.enterid }) } 页面不需要带参的情况

onShow() { this.onLoad() } 五、带参数返回上个页面

当前页面

var pages = getCurrentPages(); //当前页面 var prevPage = pages[pages.length - 2]; //上个页面 // 直接给上一个页面赋值 prevPage.setData({ params: this.data.params });

wx.navigateBack({ delta: 1 }) 要跳转的页面

data: { params: null, },

onShow: function () { let pages = getCurrentPages(); let currPage = pages[pages.length - 1]; // 将携带的参数赋值 this.setData({ params: currPage.data.params, }); } 经过测试发现只在 data 里定义参数,不写 onShow() 方法,也可以获取到上个页面传过来的值

六、对于携带不同参数的情况,页面跳转最好不要采用带参跳转方式,采用全局变量方式比较好

比如: 从 A 页面到 B 页面带的对象 a = {name: '小明', age: '18'} 从 C 页面到 B 页面带的对象 c = {pname: '小红', page: '17'} 像这样对象内部的字段名称不一样,B页面在拿到该对象后无法解析

在全局中定义变量 e ,在 A 页面中跳转前设置

 

this.$parent.globalData.e.name = a.name; this.$parent.globalData.e.age = a.age; wx.navigateTo({ url: 'B' }) 在全局中定义变量 e ,在 C 页面中跳转前设置

 

this.$parent.globalData.e.name = c.pname; this.$parent.globalData.e.age = c.page; wx.navigateTo({ url: 'B' }) 在 B 页面 onLoad() 方法中取值

 

this.obj = this.$parent.globalData.e, console.log(obj.name); console.log(obj.age);

———————————————— 版权声明:本文为CSDN博主「梅坞茶坊」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/qq_32421489/article/details/108748110

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐