移动端底层事件(如左滑返回事件)在同一个路由下不同页面需要不同的处理要怎样才能做到统一处理?

news2025/1/12 1:53:30

目录

一、问题

二、解决方法

三、总结


tiips:如嫌繁琐,直接移步总结即可!

一、问题

1.测试提了个bug:进入了一个模块A里面的子页面 a1,左滑后按照用户预期应该是返回到模块A,结果回到了app首页

二、解决方法

1.一开始:啊,有毒呀,一个模块里面只用了一个路由,我也不能全局控制每个页面到底要返回到哪个页面呀。。。。。。

2.天哪,太难了,难道要在接收到 底层事件时,设置一个变量,根据变量判断到底返回到哪里,然后还要把标志位复原?这个工作量不是一般的大呀,还要每个页面写逻辑差不多的代码。

3.没错,屈服了,准备按照2来执行了。执行过程中发现太难了,放弃。

4.看到移动端底层给的事件是全局注册的,为什么我不能注册一个全局返回函数呢?不同的页面本来就有返回按钮,事件也写好了。只要我能够在监听到移动端底层事件时,统一调用这个函数就可以了呀!

5.竟然可以!!!

6.整体思路

   1)路由首页:对于一个模块的入口页面,左滑返回上一个路由 router.back()

    2)同一个路由下的子页面注册函数backPreviousPage,函数的具体内容对应该子页面下面的返回函数,左滑执行backPreviousPage函数,然后销毁backPreviousPage函数

    3)首页:对于app首页,左滑退出app

7.代码如下:

1)简略代码:

//左滑事件处理
window['eventFromMobile'] = eventFromMobile;
const eventFromMobile=(eventArgs)=>{
  let current = router.history.current;
  let { eventType } = JSON.parse(eventArgs)
  switch(eventType){
    //左滑
    case 'KEYCODE_BACK':
      //同一个路由对应的中间页左滑
      if(typeof(window['backPreviousPage'])==='function'){
        window['backPreviousPage']()
        window['backPreviousPage']=null;
      }
      //首页
      else if(current.meta.homePage){
        Modal({
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          message: '确定退出应用吗?'
        })
          .then(() => {
            //退出
          })
          .catch(() => { });
      }
      //路由首页
      else{
        router.back()
      }
      break;
  }
}

//模块A下面的子页面注册 backPeviousPage事件
    onMounted(() => {
      getData([0, 2], false);
      
      //很重要!!!  一行代码就可以了
      window['backPreviousPage'] = goBack
    });
    //返回
    const goBack = () => {
      emit("closeComponent");
    };

2)完整代码

a.左滑主要处理逻辑

//左滑主要处理逻辑
import VueRouter from 'vue-router';
const routes = [
  {
    path: '/',
    redirect: '/task'
  },
  {
    // 登录页
    path: '/login',
    name: 'login',
    component: login,
    meta: { keepAlive: false, title: '登录', filter: true, footer: 'login' }
  },
  {
    // 登录页
    path: '/layout',
    name: 'layout',
    redirect: '/task',
    component: layout,
    children: [
      {
        path: '/task',
        name: 'task',
        meta: { title: '工作台', footer: 'task', keepAlive: true },
        component: (r) => require.ensure([], () => r(require('@/views/task/homePage/index.vue')), 'task')
      },
      {
        path: '/message',
        name: 'message',
        meta: { title: '消息', footer: 'message', keepAlive: true },
        component: (r) => require.ensure([], () => r(require('@/views/message')), 'message')
      },
      //模块A
      {
        path: '/deviceMeasure',
        name: 'deviceMeasure',
        meta: { title: '模块A', keepAlive: true },
        component: (r) =>
          require.ensure([], () => r(require('@/views/task/qualityControl/taskPage'), 'deviceMeasure'))
      },
      //模块B
      {
        path: '/deviceQuality',
        name: 'deviceQuality',
        meta: { title: '模块B', keepAlive: true },
        component: (r) =>
          require.ensure([], () => r(require('@/views/task/qualityControl/deviceQuality/index.vue'), 'deviceQuality'))
      },
    ]
  }
];
const router = new VueRouter({
  mode: 'hash',
  base: process.env.NODE_ENV === 'production' ? '/yzl/mems' : '/mems',
  routes: routes
});

//左滑事件处理
window['eventFromMobile'] = eventFromMobile;
const eventFromMobile=(eventArgs)=>{
  let current = router.history.current;
  let { eventType } = JSON.parse(eventArgs)
  switch(eventType){
    //左滑
    case 'KEYCODE_BACK':
      //同一个路由对应的中间页左滑
      if(typeof(window['backPreviousPage'])==='function'){
        window['backPreviousPage']()
        window['backPreviousPage']=null;
      }
      //首页
      else if(current.meta.homePage){
        Modal({
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          message: '确定退出应用吗?'
        })
          .then(() => {
            //退出
          })
          .catch(() => { });
      }
      //路由首页
      else{
        router.back()
      }
      break;
  }
}

b.同一个路由下的子页面

<template>
  <!-- 任务详情 -->
  <div :class="['task-detail-wrap', { 'mask-area': isShowSecondLevel }]">
    <div class="top-area">
      <div class="head-area">
        <ComHeader back :title="taskInfo.name" @goBack="goBack"> </ComHeader>
        <div class="chart-area">
        </div>
      </div>
    </div>
    <div class="bottom-area">
    </div>
  </div>
</template>
<script>
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
} from "vue";
import CircleChart from "@/components/Chart/circleChart.vue";
import RadioFilter from "@/components/Filter/radioFilter.vue";
import ScrollList from "@/components/scrollList/index.vue";
import Card from "@/components/Card/index.vue";
import PlaceImg from "@/components/placeImg/index.vue";

export default defineComponent({
  components: {
    CircleChart,
    RadioFilter,
    ScrollList,
    Card,
    PlaceImg,
  },
  props: {
    taskInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    getStatisticAPI: {
      type: Object,
      default: () => {
        return {};
      },
    },
    getDeviceAPI: {
      type: Object,
      default: () => {
        return {};
      },
    },

    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  setup(props, { emit, slots, attrs }) {
    const { proxy } = getCurrentInstance();
    onMounted(() => {
      getData();

      //加这一行就可以!!!
      window['backPreviousPage'] = goBack
    });
    //返回
    const goBack = () => {
      emit("closeComponent");
    };


    //3.获取数据
    const getData = () => {
    };


    return {
      goBack,
    };
  },
});
</script>

3)实现效果如下:左滑和点击页面左上角返回的页面完全一致。

三、总结

1.对移动端底层的事件统一处理路由相同时不同页面需要不同处理时在对应的页面注册全局函数,统一调用;一行代码解决了之前每个页面要写很多逻辑的复杂想法。

2.对于其他类似的所有页面的整体逻辑一致,但是具体的处理方式有细微差别的情况,也可以考虑注册一个全局函数,统一调用执行并且在适当的时候销毁函数

3.可能简单的方法千千万万,但是没想到的时候就是 焦头烂额,一筹莫展。

4.希望这样的灵感多一点,问题解决了,好开心 ^_^

/*

希望对你有帮助!

如有错误,欢迎指正,非常感谢!

*/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1654495.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

分布式与一致性协议之ZAB协议(七)

ZAB协议 ZAB协议:如何处理读写请求 你应该有这样的体会&#xff0c;如果你想了解一个网络服务&#xff0c;执行的第一个功能肯定是写操作&#xff0c;然后才会执行读操作。比如&#xff0c;你要了解ZooKeeper&#xff0c;那么肯定会在zkClient.sh命令行中执行写操作(比如crea…

Dynamic Extraction of Subdialogues for Dialogue Emotion Recognition

对话情感识别的子对话动态提取 摘要1. 介绍2 相关工作2.1 对话上下文建模2.2 常识知识 3 方法3.1 问题定义3.2 模型概述3.3 特征提取模块3.4 依赖性建模3.5 交互式子对话提取模块3.6 重要性增强的多头自注意力模块3.7 子对话框主题提取模块3.8. 分类模块 四、实验4.1 数据集4.1…

JAVA基础之jsp标准标签

jsp动作标签实现实例化一个实体类 <jsp:useBean id"标识符" class"java类名" scope"作用范围"> 传统的java方式实例化一个实体类 Users user new Users(); <%%> id: 对象名 * class:类 创建对象时,完全限定名(包名…

vue3使用el-autocomplete请求远程数据

服务器端 RestController RequestMapping("/teacher") public class TeacherController {Resourceprivate TeacherService teacherService;GetMapping({"/v1/getTop10TeacherByName/","/v1/getTop10TeacherByName/{name}"})public ResultBean&l…

巡检机器人有哪些功能和作用?

在科技如此发达的时代&#xff0c;巡检机器人犹如一位不知疲倦的守护者&#xff0c;悄然走进了我们的生活。它们具备着令人惊叹的功能和作用&#xff0c;成为了保障安全、提高效率的重要力量。那么&#xff0c;巡检机器人功能和作用&#xff1f;下面我们来说说旗晟机器人的几款…

爬虫:爬取豆瓣电影

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 上篇我们将到如何利用xpath的规则&#xff0c;那么这一次&#xff0c;我们将通过案例来告诉读者如何使用Xpath来定位到我们需要的数据&#xff0c;就算你不懂H5代码是怎么个嵌套或者十分复…

Leetcode—387. 字符串中的第一个唯一字符【简单】

2024每日刷题&#xff08;127&#xff09; Leetcode—387. 字符串中的第一个唯一字符 实现代码 class Solution { public:int firstUniqChar(string s) {int count[26] {0};for(char c: s) {count[c - a];}for(int i 0; i < s.length(); i) {if(count[s[i] - a] 1) {re…

LSTM神经网络 vs Transformer在量化中的应用

LSTM,全称Long Short-Term Memory,是一种特殊的递归神经网络。它通过巧妙的"门"结构,可以有效地捕捉时间序列数据中的长期依赖关系。这一特点,使得LSTM在处理股价这种具有时间序列特性的数据时,展现出了非凡的潜力。 这种特殊的递归神经网络 与一般的前馈神经网络不…

BACnet转MQTT网关智联楼宇json格式自定义

智能建筑的BACnet协议作为楼宇自动化领域的通用语言&#xff0c;正逐步迈向更广阔的物联网世界。随着云计算和大数据技术的飞速发展&#xff0c;如何将BACnet设备无缝融入云端生态系统&#xff0c;成为众多楼宇管理者关注的焦点。本文将以一个实际案例&#xff0c;揭示BACnet网…

Baidu Comate智能编码助手:提升软件生产力的高效工具使用教程

目录 一、前言 二、Comate助手概览 三、核心功能详解 智能推荐与自动补全 生成单元测试 代码注释生成 四、使用场景与优势 五、总结与展望 一、前言 随着信息技术的飞速发展&#xff0c;编程已经成为许多行业不可或缺的一部分。然而&#xff0c;编程过程中的繁琐和重复…

路由策略与路由控制

1.路由控制工具 匹配工具1&#xff1a;访问控制列表 &#xff08;1&#xff09;通配符 当进行IP地址匹配的时候&#xff0c;后面会跟着32位掩码位&#xff0c;这32位称为通配符。 通配符&#xff0c;也是点分十进制格式&#xff0c;换算成二进制后&#xff0c;“0”表示“匹配…

谷歌月球模型

收费产品&#xff0c;白嫖党勿扰 收费金额500元 1 概述 前些时间&#xff0c;有个客户&#xff0c;想fight TAIWAN&#xff0c;于是乎&#xff0c;我把谷歌地球整个台湾的模型都下载下来了&#xff0c;大约300GB。今天&#xff0c;又有个客户&#xff0c;提出一个过分要求&…

Linux网络编程:TCP编程实现

目录 1、前言 2、函数介绍 2.1 socket函数 与 通信域 2.2 bind函数 与 通信结构体 2.2.1 domain通信地址族 与 通信结构体 2.2.2 IPv4地址族结构体 2.2.3 通用地址族结构体 2.2.4 示例&#xff1a;为套接字fd绑定通信结构体addr 2.3 listen函数 与 accept函数 …

KMP + Compose 跨平台 Android IOS 实战入门

KMP&#xff08;Kotlin Multiplatform&#xff09;是一种面向移动端开发的跨平台框架&#xff0c;使用 Kotlin 语言编写&#xff0c;可实现在 Android 和 iOS 平台上共享代码和逻辑。通过 KMP 框架&#xff0c;我们可以编写一次代码&#xff0c;然后在不同的平台上进行部署和运…

HFSS学习-day2-T形波导的优化设计

入门实例–T形波导的内场分析和优化设计 HFSS--此实例优化设计 优化设计要求1. 定义输出变量Power31、Power21、和Power11&#xff0c;表示Port3、Port2、Port1的输出功率2.参数扫描分析添加扫描变量和输出变量进行一个小设置添加输出变量进行扫描分析 3. 优化设计&#xff0c…

Java 中的 HTTP 客户端库OkHttp、Apache HttpClient和HttpUrlConnection

大家好&#xff0c;我是G探险者。 项目开发里面经常会有这么一种场景&#xff1a;与服务器进行 HTTP 通信。一般存在于服务间远程调用的场景 Java 生态系统提供了多种 HTTP 客户端库&#xff0c;每种都有其自己的特点、优势和适用场景。 本文将介绍几种主要的 Java HTTP 客户…

网上离婚,快速离婚,网上立案,视频开庭,没有30天冷静期

☁️网上离婚&#xff0c;可以申请线上立案&#xff0c;视频开庭&#xff0c;这样对于无法回到本地开庭或者出于某种原因双方不想见面的朋友来说是非常便利的。 ☁️线上起诉离婚需提供的材料:&#xff08;根据自身情况选择提供&#xff09; 1&#xff1a;民事起诉状 2&…

神经网络案例实战

&#x1f50e;我们通过一个案例详细使用PyTorch实战 &#xff0c;案例背景&#xff1a;你创办了一家手机公司&#xff0c;不知道如何估算手机产品的价格。为了解决这个问题&#xff0c;收集了多家公司的手机销售数据&#xff1a;这些数据维度可以包括RAM、存储容量、屏幕尺寸、…

项目管理-项目资源管理2/2

项目管理&#xff1a;每天进步一点点~ 活到老&#xff0c;学到老 ヾ(◍∇◍)&#xff89;&#xff9e; 何时学习都不晚&#xff0c;加油 资源管理&#xff1a;6个过程“硅谷火箭管控” ①规划资源管理&#xff1a; 写计划 ②估算活动资源&#xff1a;估算团队资源&…

2024最新手赚手机软件APP下载排行网站源码及应用商店源码

前言 这是一款简洁蓝色的手机软件下载应用排行、平台和最新发布网站&#xff0c;采用响应式织梦模板。主要包括主页、APP列表页、APP详情介绍页、新闻资讯列表、新闻详情页、关于我们等模块页面。 想入行手赚行业的朋友&#xff0c;这套源码非常适合你&#xff0c;简单的部署上…