微信小程序页面返回问题

红太狼 2021-09-08 17:22 664阅读 0赞

一、回退上一级页面 beforePage

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

  1. var pages = getCurrentPages(); //当前页面
  2. var beforePage = pages[pages.length - 2]; //前一页
  3. wx.navigateBack({
  4.   success: function () {
  5.     beforePage.onLoad(); // 执行前一个页面的onLoad方法
  6.   }
  7. });

二、回退 3 级页面 wx.navigateBack

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

  • wx.navigateBack 这个方法可以返回界面 在 onUnload 触发的时候可以执行。但是我发现这个方法确实可以回到首页，但是他会一个一个界面返回，不能直接返回到首页
  1. onUnload:function(){
  2.   wx.navigateBack({
  3.     delta: 3
  4.   })
  5. }
  • 正常 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 了。
  1. wx.redirectTo({
  2.   url: url
  3. })

三、回退 4 级或者更多级页面，wx.reLaunch

  1. onUnload() {
  2.   console.log('返回按钮')
  3.   wx.reLaunch({
  4.     url: '../../pages/index'
  5.   })
  6. }

四、返回多级页面，同时刷新

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

  • 页面需要带参进来的情况
  1. onShow() {
  2.   this.onLoad({
  3.     uid: this.$parent.globalData.enterid
  4.   })
  5. }
  • 页面不需要带参的情况
  1. onShow() {
  2.   this.onLoad()
  3. }

五、带参数返回上个页面

  • 当前页面
  1. var pages = getCurrentPages();   //当前页面
  2. var prevPage = pages[pages.length - 2];   //上个页面
  3. // 直接给上一个页面赋值
  4. prevPage.setData({
  5.   params: this.data.params
  6. });
  8. wx.navigateBack({
  9.   delta: 1
  10. })
  • 要跳转的页面
  1. data: {
  2.   params: null,
  3. },
  5. onShow: function () {
  6.   let pages = getCurrentPages();
  7.   let currPage = pages[pages.length - 1];
  8.   // 将携带的参数赋值
  9.   this.setData({
  10.     params: currPage.data.params,
  11.   });
  12. }

经过测试发现只在 data 里定义参数，不写 onShow() 方法，也可以获取到上个页面传过来的值

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

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

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

  1. this.$parent.globalData.e.name = a.name;
  2. this.$parent.globalData.e.age = a.age;
  3. wx.navigateTo({
  4.   url: 'B'
  5. })

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

  1. this.$parent.globalData.e.name = c.pname;
  2. this.$parent.globalData.e.age = c.page;
  3. wx.navigateTo({
  4.   url: 'B'
  5. })

在 B 页面 onLoad() 方法中取值

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

发表评论

表情：
评论列表 （有 0 条评论，664人围观）

还没有评论，来说两句吧...

相关阅读

    相关 微信小程序页面布局

    一,微信小程序页面布局方式采用的是Flex布局 1.Flex布局，是W3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现各种页面布局。 2.Flex布局提

    野性酷女野性酷女/ 0 赞/ 877 阅读