微信小程序返回多级页面

微信小程序开发中,返回上一页是很普遍的操作,最常见的是点击手机的返回键和点击自定义的按钮返回上一页这两种情况。点击手机的返回键我们不需要做处理,如果是自定义按钮实现返回效果,就要调用微信提供的API:

wx.navigateBack(OBJECT)

也可以通过 wx.navigateBack 方法实现返回多级页面,只要设置 delta 的值就可以:

//在C页面内 navigateBack,将返回A页面,delta = 1 时与 wx.navigateBack() 效果一致
wx.navigateBack({
  delta: 2
})

但是有些时候,我们需要实现点击手机的返回键,也返回上两页或者多页,这样子就不能直接用上面的方法来处理了。

处理方法:

1)在页面C的 onUnload 方法里通过 getCurrentPages() 方法获取当前的页面栈,根据页面栈设置页面的 data 参数,这里以返回上两页为例:

//这里是页面C的 onUnload 方法
onUnload: function() {
    console.log('home onUnload');
    //获取页面栈
    var pages = this.getCurrentPages();
    if (pages[1].route === 'pages/home') {
         wx.navigateBack({delta: 1});
         //wx.reLaunch({ url: './welcome' });
     } else {
         console.log('进入三级返回', pages);
         wx.setStorageSync('goBack', true);
         wx.navigateBack({delta: 3});
         //wx.reLaunch({ url: './welcome' });
     }
},

② 在页面B的 onShow 方法里面根据 goBack 的值,判断是否调用 wx.navigateBack() :

//这里是页面B的 onShow 方法
onShow: function() {
    var that = this
    //如果 goBack 为 true,就返回上一页
    if(wx.getStorageSync('goBack')) {
        wx.navigateBack()
    }
},

此方法不是直接从页面C到页面A,都是要先经过页面B,所以会出现页面B闪一下的情况,欢迎大神有更好的方法推荐~~

猜你喜欢

转载自blog.csdn.net/qq_35790269/article/details/81775072
今日推荐