编程语言
首页 > 编程语言> > 微信小程序页面返回

微信小程序页面返回

作者:互联网

 

一、回退上一级页面 beforePage

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

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

二、回退 3 级页面 wx.navigateBack

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

onUnload:function(){
  wx.navigateBack({
    delta: 3
  })
}
wx.redirectTo({
  url: url
})

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

onUnload() {
  console.log('返回按钮')
  wx.reLaunch({
    url: '../../pages/index'
  })
}

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

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

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 页面 onl oad() 方法中取值

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

标签:返回,navigateBack,微信,跳转,页面,pages,wx
来源: https://www.cnblogs.com/isuansuan/p/11598944.html