vue 手机物理返回键关闭弹框

Posted 2023-04-17

参考技术A 1、打开弹窗调用 window.history.pishState() 函数

2、关闭弹框

3、mounted 生命周期 监听popstate 事件

 4、beforeDestroy 生命周期 移除popstate 事件

兼容安卓和ios的手机端浏览器返回和物理返回的监听处理操作实战(推荐)

整个手机端操作流程如下：

首页=>页面A=>页面B/页面C

页面B：弹出个操作框可以点击物理返回键只关闭操作框，不触发页面刷新之类的操作，在操作框没弹出的时候返回能正常返回页面A

页面C：返回能正常返回页面A

详情见下图：

案例结构

 B.vue操作代码

html

<template>
  <div class="about">
    <h1>页面B</h1>
    <button @click="showPopup()">弹</button>
    <van-popup style="width:100%;height:100%" :close-on-click-overlay="false" :closeable="true" v-model="isShow" @click-close-icon="closePopup"
      > 实际上我只是个弹窗 <br> 
      这个弹窗你可以自定义一下返回按钮， <br> 
      或者不留返回按钮只允许物理返回 <br>
      应用场景有选择地址，选择收获地址，模拟跳到新的页面等...
      </van-popup
    >
  </div>
</template>

js

<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },
  mounted() {
    window.addEventListener(
      "popstate",
      (e) => {
        console.log("e", e);
        if (this.isShow) {
          //如果弹窗是开着的那么关闭他
          this.isShow = false;
        }
      },
      false
    );
    console.log('刷新了一次页面')
  },
  methods: {
    showPopup() {
      //打开弹窗并且插入一条历史记录
      this.pushHistory(() => {
        this.isShow = true;
      });
    },
    closePopup(){
      //如果不是点击物理返回的时候触发
      console.log('触发')
      history.go(-1)
    },
    pushHistory(callback) {
      // 插入历史记录
      let state = {
        title: "title",
        url: "#aaa",
      };
      window.history.pushState(state, "title", "#return_back");
      if (typeof callback === "function") {
        this.$nextTick(() => {
          callback();
        });
      }
    },
  },
};
</script>

项目地址

https://gitee.com/huqinggui/vue_back.git