lock-native-back

主要用于移动端监听用户点击系统返回并阻止页面路由自动回退

Usage no npm install needed!

<script type="module">
  import lockNativeBack from 'https://cdn.skypack.dev/lock-native-back';
</script>

README

lock-native-back

作用

主要用于移动端监听用户点击系统返回并阻止页面路由自动回退

使用场景

开发移动端h5页面时，我们经常会遇到，在页面内打开一个全屏的弹框的时候，用户点击系统返回键，不是关闭弹框而是返回到了上一个页面的情况。 针对这种情况，使用本插件可以监听用户点击系统返回并阻止页面路由自动回退，同时做一些事（比如按系统返回关闭弹框）

原理

利用pushState向浏览历史列表中插入当前页面，在点击后退时再插入一次，这样就阻止页面路由自动回退回上一个页面了

使用

在vue中使用： （其他框架可以参照着处理）

import LockNativeBack from 'lock-native-back'

export default {
  data() {
    return {
      show: false  // 控制弹框开关
    }
  },
  methods: {
    // 打开弹框时调用
    open() {
      this.show = true
      
      const lockNativeBack = new LockNativeBack({
        onPopState: () => this.show = false     // 用户点击返回按钮时触发
      })
      // 打开弹框时锁住
      lockNativeBack.lock()
      
      // 关闭弹框时解锁
      this.$watch('show', show => !show && lockNativeBack.unLock())
    }
  }
}

options

  • onPopState
    type: Function 功能： 导航发生变化，一般是用户点击了系统返回时触发