解决移动端使用el-drawer侧边栏展开时触摸滚动的问题

原因分析:

通过 el-drawer 控件实现了底部栏的展示和隐藏,但在移动设备上侧边栏展开时仍然可以通过触摸滑动页面内容,导致用户体验不佳,产生意外的滚动行为。
这是因为在底部栏展开时,未能有效阻止页面内容的触摸滑动。

解决方案:

<template><el-drawer v-model="drawer.show" direction="btt">...</el-drawer>
</template>
<script lang="ts" setup name="...">
const preventTouchMove = (event: TouchEvent) => {event.preventDefault(); // 阻止默认的触摸移动行为
};const drawerShow = (show: boolean) => {drawer.value.show = show;const bodyElement = document.querySelector('body');if (show) {bodyElement?.addEventListener('touchmove', preventTouchMove, { passive: false });} else {bodyElement?.removeEventListener('touchmove', preventTouchMove, false);}
};
</script>

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

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

相关文章

分布式集群下的业务敏感数据加解密之具体业务解决方案(附代码)

前面的一篇文章中写了敏感数据加解密的通用解决方案&#xff0c;这篇文章来写一下具体的业务如何接入这个方案&#xff0c;业务的接入首要宗旨当然是对业务侵入性要最小&#xff0c;尽可能不影响原生的业务逻辑&#xff0c;说白了就是少改点代码。下面给大家提供一个简单的示例…

机械行业工程设计资质乙级技术负责人要求

机械行业工程设计资质乙级技术负责人的要求可以归纳为以下几点&#xff1a; 一、基本要求 学历&#xff1a;技术负责人应当具有大学本科以上学历。设计经历&#xff1a;技术负责人需要具有10年以上的设计经历。 二、项目经历要求 大型项目经验&#xff1a;技术负责人需要主…

redis 如何获取所有key的信息及值,相关过期时间查询

简单粗暴获取所有key keys * 另一种方式&#xff1a; scan 0 切换数据库&#xff1a; select db Map类型 获取map的数量 hlen key 获取map所有的数据 hvals key 或者 hgetall key 整个哈希表的过期时间&#xff1a; EXPIRE your_hash_key 3600 # 设置哈希表 yo…

前端渲染页面的原理

之前一直不愿意写一篇关于原理的&#xff0c;因为说起来实在是太繁杂&#xff0c;要写得细&#xff0c;码字梳理&#xff0c;计算下来起码都要差不多三周。以前一直躲避这个事情&#xff0c;现在反正有时间&#xff0c;为了不荒废自己&#xff0c;那就从头捋一遍。也方便自己后…

整理好了!2024年最常见 20 道 Rocket MQ面试题(四)

上一篇地址&#xff1a;整理好了&#xff01;2024年最常见 20 道 Rocket MQ面试题&#xff08;三&#xff09;-CSDN博客 七、RocketMQ消费模式有几种&#xff1f; RocketMQ 提供了两种主要的消费模式&#xff0c;分别是&#xff1a; 集群消费模式&#xff08;Clustering&…

HFish蜜罐实践:网络安全防御的主动出击

引言 随着网络攻击手段的不断演进&#xff0c;传统的被动防御策略已难以应对复杂多变的安全威胁。HFish蜜罐作为一种主动防御工具&#xff0c;通过模拟易受攻击的服务&#xff0c;吸引攻击者&#xff0c;不仅能有效捕获攻击行为&#xff0c;还能为安全分析和溯源提供宝贵信息。…

数据分析项目有哪些实施流程?揭示从数据准备到解决方案全过程

在当今数据驱动的商业环境中&#xff0c;数据分析项目的成功实施对于企业洞察市场趋势、优化产品服务、提升用户体验以及增强竞争力具有至关重要的作用。特别是对于直播类应用软件这样的快速增长领域&#xff0c;如何通过数据分析来扩大付费用户基础、提高用户留存率&#xff0…

音视频开发10 FFmpeg 内存模型-AVPacket, AVFrame

从现有的 Packet 拷贝一个新 Packet 的时候&#xff0c;有两种情况&#xff1a; • ①两个 Packet 的 buf 引用的是 同一数据缓存空间 &#xff0c;这时 候要注意数据缓存空间的释放问题&#xff1b; • ②两个 Packet 的 buf 引用不同的数据缓存空间 &#xff0c;每个 Pac…

矩阵结构下需要的文化导向

在产品研发与产品管理过程中&#xff0c;如何有效运行矩阵结构一直是企业面临的一大难题&#xff0c;尤其是在中国式官本位文化很强势的文化传统下。但是&#xff0c;这个难题是完全可以解决的&#xff0c;汉捷咨询在国内就已经帮助200多家企业建立了有效的矩阵结构。基于汉捷的…

2024年华为OD机试真题-项目排期-C++-OD统一考试(C卷D卷)

2024年OD统一考试(D卷)完整题库:华为OD机试2024年最新题库(Python、JAVA、C++合集) 题目描述: 项目组共有N个开发人员,项目经理接到了M个独立的需求,每个需求的工作量不同,且每个需求只能由一个开发人员独立完成,不能多人合作。假定各个需求直接无任何先后依赖关系,…

D2Admin:企业中后台产品前端集成方案的探索与实践

D2Admin&#xff1a;企业中后台产品前端集成方案的探索与实践 摘要&#xff1a;随着企业信息化建设的不断深入&#xff0c;中后台管理系统的前端技术选型与集成方案成为了关键。D2Admin作为一款完全开源免费的前端集成方案&#xff0c;通过采用最新的前端技术栈&#xff0c;提…

惠海半导体 30V-60V-100V-150VMOS管 打火机、加湿器NMOS管 高耐压

MOS管的工作原理 MOS管&#xff0c;即金属-氧化物-半导体场效应晶体管&#xff0c;是一种重要的电子元件&#xff0c;在电路中起着关键的作用。其工作原理主要基于半导体材料的特性以及电场对电荷的控制。 首先&#xff0c;MOS管的基本结构包括源极、栅极和漏极。其中&#xf…

我国赤泥年产量庞大 政策引导下赤泥绿色利用率将不断提升

我国赤泥年产量庞大 政策引导下赤泥绿色利用率将不断提升 赤泥是指从铝土矿中提炼氧化铝后产生的强碱性工业固体废渣&#xff0c;由于含大量氧化铁&#xff0c;表面呈现红色&#xff0c;而得名赤泥。   赤泥通常包含氧化铝、氧化铁、二氧化硅、氧化钙、碱金属及其他微量元素&…

HFish蜜罐管理端搭建:构建网络安全的主动防御系统

引言 在网络攻防对抗日益激烈的今天&#xff0c;蜜罐技术作为一种有效的主动防御手段&#xff0c;越来越受到网络安全专家的青睐。HFish蜜罐以其强大的功能和灵活的部署方式&#xff0c;成为网络安全防护体系中的重要组成部分。本文将详细介绍如何在CentOS 7.6系统上搭建HFish…

排序专题(常见8种)【思路解析和代码实现】【2w字长文】

排序专题&#xff08;常见8种&#xff09; 1.排序的概念及其运用 1.1排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 稳定性&#xff1a;假定在待排序的记录序列中…

【设计模式】JAVA Design Patterns——Dependency Injection(依赖注入模式)

&#x1f50d;目的 依赖注入是一种软件设计模式&#xff0c;其中一个或多个依赖项&#xff08;或服务&#xff09;被注入或通过引用传递到一个依赖对象&#xff08;或客户端&#xff09;中&#xff0c;并成为客户端状态的一部分。该模式将客户的依赖关系的创建与其自身的行为分…

ABAP WRITE换行输出

不换行&#xff1a; write hello world!. write 春天马上就到了!. 换行&#xff1a; write hello world!. write /春天马上就到了!. 换行的第二种&#xff1a; write: hello world! ,/,春天马上就到了!.

基于STM32实现智能水下机器人控制系统

目录 引言环境准备智能水下机器人控制系统基础代码示例&#xff1a;实现智能水下机器人控制系统 电机控制深度传感器数据读取IMU传感器数据读取用户界面与显示应用场景&#xff1a;水下探测与环境监测问题解决方案与优化收尾与总结 1. 引言 本教程将详细介绍如何在STM32嵌入式…

Comfyui导出图片的命名技巧,日期文件夹

种子序号命名&#xff1a;%KSampler.seed% 图片宽高序号命名&#xff1a;%Empty Latent Image.width%x%Empty Latent Image.height% 年月日&#xff1a;%date:yyyy-MM-dd% 时分秒&#xff1a;%date:hhmmss% 年月日种子序号&#xff1a;%date:yyyy-MM-dd%/%KSampler.seed%