弹窗弹出后,事件穿透问题

弹窗弹出后,事件穿透问题

在写一个uniapp的页面时,弹窗弹出后底层盒子还能进行拖动

解决

在弹出的盒子上设置catchtouchmove事件,

<view catchtouchmove>这是弹出层</view>
但是只设置一个事件会报错:
does not have a method “true” to handle event “touchmove”.

我们可以给事件注册一个具体的方法来防止报错,

<view catchtouchmove = "isShow">这是弹出层</view>
methods: {
	isShow(){}
}

设置完之后弹窗弹出时窗口就被锁定了,但是测试工具依旧会报一个错,但是真机并不会出现这个问题,我猜测可能是测试工具不认识catchtouchmove事件导致的.

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序的弹出框在设计时可能会遇到滚动穿透问题,这种情况通常发生在用户点击了弹出框内部的内容,但在页面上却触发了其他区域的操作。这种现象可能是由多种因素导致的,包括但不限于: ### 弹出框组件配置不当 在创建弹出框组件时,其属性设置可能存在问题,例如: - `mask-closable` 属性未开启:默认情况下,如果弹出框关闭按钮不可见,则可能不会阻止用户通过滚动屏幕关闭弹出框,而是通过触摸屏幕边缘实现。 - `show` 状态改变处理不当:当弹出框显示和隐藏的状态改变时,如果没有正确处理页面滚动事件,可能导致页面滚动不受控。 ### 页面布局和元素定位 页面布局和元素的位置可能不够清晰,使得某些元素在视觉上被认为是可以直接操作的,即便它们实际上处于弹出框内。这需要仔细检查页面的 CSS 样式和组件布局,确保所有可交互元素都明确地存在于正确的容器内,并且有明显的分隔边界。 ### 滚动事件冲突 在处理滚动事件时可能存在逻辑错误,比如优先级处理、事件捕获与冒泡等机制未正确应用,导致弹出框内的滚动事件未能正常响应,而外部滚动事件却被触发。 ### 解决方案 #### 组件配置调整 确保弹出框组件包含以下关键配置选项: - 开启 `mask-closable` 属性,允许用户通过点击遮罩层关闭弹出框。 - 对于弹出框内的所有可交互内容,确保使用合适的点击事件监听器 (`@click`) 和自定义的闭合函数来控制弹出框的展示状态。 #### 页面布局优化 - 使用相对定位或绝对定位对关键元素进行精确布局,避免它们意外与弹出框发生互动。 - 利用 `position` 属性以及适当的 `top`, `left`, `right`, `bottom` 来定位元素,确保它们既可见又互不干扰。 #### 事件处理改进 - 将滚动相关的事件处理器放在适当的位置,避免在不恰当的时间触发不必要的动作。 - 可以考虑添加特定的类名或样式标记到页面的主要区域,以便更精细地控制滚动和交互的行为。 #### 测试与调试 最后,进行全面的测试,尤其是在各种设备和浏览器环境下,确保弹出框功能的稳定性和兼容性。利用开发者工具分析和调试页面行为,找出并修正潜在的问题点。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值