c语言编程笔录

首页 >   > 笔记大全

笔记大全

uniapp成功跳转怎么禁止返回

更新时间:2023-10-12

第一段:理解uniapp跳转页面的生命周期钩子函数

uniapp提供了一系列用于管理页面生命周期的钩子函数,其中onLoad、onShow、onReady、onHide、onUnload是五个最核心的函数。其中onUnload是离开页面的最后一个钩子函数,我们可以在这个函数里做一些清理工作,比如关闭打开的socket连接等。而禁止返回功能的实现正是基于这个钩子函数来实现的。我们只需要在onUnload函数中对目标页面进行标记,如果这个标记已被设置,表示不允许返回。

      // 在目标页面的onUnload钩子函数里,设置返回标记
      onUnload() {
        this.fromPage='index';
      }
    

第二段:使用uni.navigateBack函数实现基础返回功能

基础的返回功能可以使用uniapp自带的navigateBack函数来实现。如果没有禁止返回功能的限制,我们只需要简单地调用这个函数即可。其默认行为是返回上个页面并且重新加载这个页面,如果要想保留上个页面的状态,需要传入delta参数,有多少个页面需要返回就传入几个数值。

      // 普通的返回功能
      uni.navigateBack({
        delta: 1
      });
    

第三段:重写uni.navigateBack函数禁止返回

在禁止返回的场景下,我们需要重写uni.navigateBack函数,来实现用户无法返回上一页的效果。过程非常简单,只需要在跳转前检查目标页面是否设置了返回标记,如果设置了,就直接跳转到首页。

      // 禁止返回的navigateBack函数
      uni.navigateBack=function(options) {
        var pages=getCurrentPages();
        var fromPage=pages[pages.length - 2]; // 获取上一页
        if (fromPage && fromPage.fromPage==='index') {
          uni.switchTab({ // 通过switchTab跳转到首页
            url: '/pages/index/index'
          });
        } else {
          uni._navigateBack(options); // 调用uni原有的navigateBack函数
        }
      };
    

第四段:总结

综上所述,禁止返回的实现是基于uniapp的页面跳转生命周期钩子函数和原生的navigateBack函数实现的。只需要在目标页面的onUnload钩子函数里设置返回标记,然后在跳转前进行检查即可禁止返回。通过重写uni.navigateBack函数,可以实现更精细的控制,比如禁止返回的页面发生变化时,可以通过修改重写函数里的fromPage属性来灵活应对。同时也需要注意一些细节问题,比如在一些特殊场景下(如tabbar页面)禁止返回需要用switchTab而不是navigateBack,这些都需要在具体实现过程中仔细考虑。