如何在page-container 中使用navigateBack返回？

我爱上这尘世纷纷扰扰的相遇

爱上不停重复俗气又沉重的春天

起初

旧版我们进入文章时候会有一个模拟弹窗用户需要阅读激励视频获取阅读奖励。该方式进入后直接出现显得界面生硬卡顿，新版中使用page-container激励视频弹窗提示，进入退出有动画效果提高用户体验

如何在page-container 中使用navigateBack返回？

思考

文章详情的进入方式有多种例如首页，列表页，分享等，对不同进入的页面需做不同的处理，若从首页，列表进入文章详情我们点击后应该返回上一级页面栈，若从分享进入无法向上一级返回页面首页或者指定的页面

问题

1：点击遮罩层会退出容器，bind:clickoverlay事件无法禁止退出

2：用户从分享形式进入无法使用navigateBack返回

方式

1：使用全屏page-container即可解决点击遮罩层会退出容器，因为是全屏用户可以依赖原生的左上角返回

2：自定义写popup

3：那坚持使用page-container底部半屏弹窗呢？

解决

阅读官方文档中其实明确可以知道wx.navigateBack 无法在页面栈顶调用，此时没有上一级页面，上面描述中有提到：“提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用wx.navigateBack 接口”

我们可以理解为navigateBack无法生效是因为容器组件引起的，我们是需要在关闭容器函数之后再用navigateBack接口即可返回页面栈

 exit() {
    var pages = getCurrentPages();
    console.log('页面栈:',pages)
    this.setData({show: false})
    wx.navigateBack({
      delta: 1
    })
  },

经过测试代码无法生效，但是控制台是有返回信息

初步判断是函数同时执行问题。即然如此我们在关闭容器之后执行定时器再触发navigateBack接口，案例证明确实如此

 setTimeout(() => {
      wx.navigateBack({
          delta: 1
      })
    }, 200)

定时器时间参数位200事因为100太过于卡顿，1000则偏慢。而200它刚可以在容器退出动画结束时间段触发返回

最后

我们只要添加一个页面的数组长度判断即可实现我们在page-container 中使用navigateBack返回的需求，无论从什么界面不影响用户体验

exit() {
    var pages = getCurrentPages();
    console.log('页面栈:',pages)
    this.setData({show: false})
    setTimeout(() => {
      if(pages.length == 1){
        wx.navigateTo({
          url: '../home/index',
        })
      }else{
        wx.navigateBack({
          delta: 1
        })
      }
    }, 200)
  },