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

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

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

 

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

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

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

详情见下图:

image.png

案例结构

2021080823360056.png


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

目录
相关文章
|
1月前
|
存储 消息中间件 人工智能
【03】AI辅助编程完整的安卓二次商业实战-本地构建运行并且调试-二次开发改注册登陆按钮颜色以及整体资源结构熟悉-优雅草伊凡
【03】AI辅助编程完整的安卓二次商业实战-本地构建运行并且调试-二次开发改注册登陆按钮颜色以及整体资源结构熟悉-优雅草伊凡
80 3
|
3月前
|
安全 API Python
详解手机状态查询API实战指南
手机状态查询API是一款高效接口,可实时识别手机号状态(实号、空号、风险号等),帮助企业筛选有效号码,提升业务触达率与客户体验。
387 0
|
1月前
|
存储 消息中间件 人工智能
【08】AI辅助编程完整的安卓二次商业实战-修改消息聊天框背景色-触发聊天让程序异常终止bug牵涉更多聊天消息发送优化处理-优雅草卓伊凡
【08】AI辅助编程完整的安卓二次商业实战-修改消息聊天框背景色-触发聊天让程序异常终止bug牵涉更多聊天消息发送优化处理-优雅草卓伊凡
143 10
【08】AI辅助编程完整的安卓二次商业实战-修改消息聊天框背景色-触发聊天让程序异常终止bug牵涉更多聊天消息发送优化处理-优雅草卓伊凡
|
1月前
|
存储 消息中间件 人工智能
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
84 11
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
|
1月前
|
XML 存储 Java
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
67 3
【06】AI辅助编程完整的安卓二次商业实战-背景布局变更增加背景-二开发现页面跳转逻辑-替换剩余图标-优雅草卓伊凡
|
1月前
|
存储 消息中间件 人工智能
【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
【04】AI辅助编程完整的安卓二次商业实战-寻找修改替换新UI首页图标-菜单图标-消息列表图标-优雅草伊凡
68 4
|
1月前
|
存储 API Android开发
【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡
【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡
112 4
【02】完整的安卓二次商业实战-配置gradle-构建打包原生安卓项目-调试本地运行模拟器-优雅草伊凡
|
1月前
|
XML 编解码 Android开发
非常经典的Android开发问题-mipmap图标目录和drawable图标目录的区别和适用场景实战举例-优雅草卓伊凡
非常经典的Android开发问题-mipmap图标目录和drawable图标目录的区别和适用场景实战举例-优雅草卓伊凡
108 0
非常经典的Android开发问题-mipmap图标目录和drawable图标目录的区别和适用场景实战举例-优雅草卓伊凡
|
1月前
|
Java 开发工具 Maven
【01】完整的安卓二次商业实战-详细的初级步骤同步项目和gradle配置以及开发思路-优雅草伊凡
【01】完整的安卓二次商业实战-详细的初级步骤同步项目和gradle配置以及开发思路-优雅草伊凡
130 6
|
7月前
|
JavaScript Linux 网络安全
Termux安卓终端美化与开发实战:从下载到插件优化,小白也能玩转Linux
Termux是一款安卓平台上的开源终端模拟器,支持apt包管理、SSH连接及Python/Node.js/C++开发环境搭建,被誉为“手机上的Linux系统”。其特点包括零ROOT权限、跨平台开发和强大扩展性。本文详细介绍其安装准备、基础与高级环境配置、必备插件推荐、常见问题解决方法以及延伸学习资源,帮助用户充分利用Termux进行开发与学习。适用于Android 7+设备,原创内容转载请注明来源。
1573 77

热门文章

最新文章