uni-app禁用系统侧边滑动返回的方法汇总

2023-12-26 16:33:24

前言

在使用uni-app开发移动应用程序时，我们经常会遇到需要关闭系统侧边滑动返回功能的情况。这是因为侧边滑动返回手势可能会与应用程序内的手势冲突，导致用户体验不佳。那么，如何在uni-app中关闭系统侧边滑动返回呢？本文将提供四种方法，适用于安卓和iOS两种操作系统。

方法一：在manifest.json文件中配置

1. 找到manifest.json文件

manifest.json文件是uni-app项目的配置文件，位于项目根目录下。

2. 添加如下配置

{
  "navigationGesture": false
}

3. 保存文件并重新运行项目

方法二：在app.vue文件中配置

1. 打开app.vue文件

app.vue文件是uni-app项目的入口文件，位于项目根目录下的src文件夹中。

2. 添加如下代码

export default {
  onLaunch() {
    uni.getSystemInfo({
      success: (res) => {
        if (res.platform === 'android') {
          uni.setEnableBackGesture(false)
        }
      }
    })
  }
}

3. 保存文件并重新运行项目

方法三：在页面中配置

1. 打开需要关闭侧边滑动返回的页面文件

页面文件位于项目根目录下的src/pages文件夹中。

2. 添加如下代码

export default {
  onPageScroll: true,
  methods: {
    onPageScroll(e) {
      if (e.direction === 'left') {
        return false
      }
    }
  }
}

3. 保存文件并重新运行项目

方法四：使用路由拦截

1. 打开main.js文件

main.js文件是uni-app项目的入口文件，位于项目根目录下。

2. 添加如下代码

import Vue from 'vue'
import App from './App.vue'

Vue.prototype.$lockBack = function () {
  uni.getSystemInfo({
    success: (res) => {
      if (res.platform === 'android') {
        uni.setEnableBackGesture(false)
      }
    }
  })
}

Vue.prototype.$unLockBack = function () {
  uni.getSystemInfo({
    success: (res) => {
      if (res.platform === 'android') {
        uni.setEnableBackGesture(true)
      }
    }
  })
}

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

3. 在需要关闭侧边滑动返回的页面中使用路由拦截

export default {
  beforeRouteLeave(to, from, next) {
    this.$lockBack()
    next()
  },
  beforeRouteEnter(to, from, next) {
    this.$unLockBack()
    next()
  }
}