uni-app为啥跳转打开该页面后还能侧滑返回上一个页面？

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app为啥跳转打开该页面后还能侧滑返回上一个页面？

{
  "path": "pages/findPeple/ersonDetail",
  "style": {
    "navigationStyle": "custom", // 自定义顶部导航栏
    "navigationBarTitleText": "",
    "app-plus": {
      "titleNView": false,
      "popGesture": "none"
    },
    "disableScroll": true // 是否禁止页面滚动
  }
}

Harmonyos Next教程
3 回复

需要禁用物理返回 onBackPress(options) {
if (options.from === ‘backbutton’) {
return true;
}
}


禁用侧滑返回好像只有ios生效，安卓需要在页面的onBackPress里面自己手动禁用

在uni-app中，默认情况下，页面之间的跳转是支持侧滑返回的，这是由于uni-app框架内置的页面栈管理机制所决定的。页面栈允许用户通过侧滑手势返回到上一个页面，这种行为在很多移动应用中是一种常见的用户体验设计。

然而，如果你希望在某个特定页面中禁止侧滑返回，你可以通过一些编程手段来实现。下面是一个基本的实现思路，主要是通过监听页面的生命周期函数和自定义返回逻辑来达到目的。

首先，你可以在目标页面的onShow生命周期函数中设置一个标志位，表示该页面已经显示。然后，在onBackPress事件中判断这个标志位，如果页面已经显示并且用户尝试返回，则阻止默认的返回行为。

以下是一个简单的代码示例：

// 在目标页面的 script 部分
export default {
  data() {
    return {
      isPageShown: false // 用于标记页面是否已经显示
    };
  },
  onShow() {
    this.isPageShown = true; // 页面显示时设置标志位
  },
  onHide() {
    this.isPageShown = false; // 页面隐藏时重置标志位
  },
  methods: {
    // 监听返回事件
    handleBackPress(event) {
      if (this.isPageShown) {
        // 阻止默认的返回行为
        return true;
      }
      // 如果不阻止，则返回 false 或者不处理，让默认的返回行为继续
      return false;
    }
  },
  onBackPress(event) {
    // 调用自定义的返回处理函数
    return this.handleBackPress(event);
  }
};

// 在页面的 mounted 钩子或者其他合适的地方注册返回事件监听（如果需要的话）
// 注意：uni-app 的 onBackPress 是页面自带的生命周期函数，不需要额外注册

注意：

  1. onBackPress 是 uni-app 页面自带的生命周期函数，用于监听用户点击返回按钮或执行返回手势时的行为。在函数中返回 true 表示已经处理过返回事件，不需要执行默认的返回操作；返回 false 则表示没有处理，将继续执行默认的返回操作。
  2. 上述代码示例中，handleBackPress 方法被用于封装返回事件的处理逻辑，并在 onBackPress 中被调用。这样做的好处是可以将返回逻辑集中管理，便于维护和扩展。

通过这种方式，你可以有效地控制在特定页面中是否允许用户通过侧滑手势返回上一个页面。

回到顶部