微信小程序点击穿透问题

最新推荐文章于 2024-07-27 13:10:37 发布
最新推荐文章于 2024-07-27 13:10:37 发布
阅读量1w 收藏 3
点赞数 2
文章标签： 小程序 js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43046729/article/details/105807408
版权
本文探讨了微信小程序中button点击导致textarea聚焦弹出键盘的问题。错误方法包括改变布局和使用无效解决方案。最终，通过引入微信官方的cover-view组件成功解决问题。
摘要由CSDN通过智能技术生成

本文针对解决微信小程序中遇到的button点击穿透问题

遇到的问题：

当button所在的区域下有textarea的话，点击按钮会使得下方的textarea获得焦点弹出键盘，在开发工具上没有这样的问题

错误方法一：

当时第一个想到了 z-index事实证明不好使还是不好使。

错误方法二：

当时第二个想到了改变一下布局要不了写死在下面，差点被设计和老板打死，强烈不推荐，我已经亲身实验，小姐姐的指甲只掐你一点肉真的疼。

正文解决方法：

在微信文档上发现了一个好东西cover-view来挡住textarea，把button放cover-view上。
上代码-》》

// An highlighted block
/**wxml这个是重点*/
<cover-view class="dibu" bindtap
最低0.47元/天 解锁文章
蛮笋
关注
内网穿透代理服务器nps使用初探（三）微信小程序内网穿透
gmHappy
12-07 2428
内网网站（内网机器`192.168.1.113`上部署的`Web`服务，因微信小程序开发需要采用`https`协议，`https`端口为`8070`），想通过外网`39.97.238.139`（给定域名如：https://proxy.***.com/）的`8070`端口进行内网网站访问。 **`NPS`这里有几个点需要注意**： - 域名解析不能配置端口号，且只能解析到你配置好的`http`端口和`https`端口。 - 只要在内网机器上做好了`https`，可以直接用`TCP`，很方便。
微信小程序（原生）——多层view的点击穿透问题
努力、拼搏、奋进
11-14 3932
微信小程序（原生）——多层view的点击穿透问题
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
主要介绍了微信小程序scroll-view实现滚动穿透和阻止滚动的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序弹框防止滚动穿透
到点睡觉了的博客
07-05 375
解决方法：使用catchtouchmove。可以阻止弹框时的滚动，或者进行其他动作。
微信小程序解决view点击事件穿透地图map触发markertap
weixin_55109830的博客
10-18 7351
解决view点击事件穿透地图map触发markertap 点击能滑动的scroll-view反而不会触发底下的markertap，就等于是一个不穿透的容器。 用透明的可滑动的scroll-view放在上层作为隐形按钮，下次放普通的按钮样式，这回真正的解决了ios的bug。
微信小程序穿透事件
maple_and_sakura的博客
03-18 2320
<cover-view/>内只能嵌套 <cover-view/> <cover-image/> <button/> <navigator/> <ad/> 1.<cover-view></cover-view> // 使用的目的:解决穿透事件 例如遮罩层下面存在input textarea等标签 2.无法使用cover-view的情况下，用v-show对遮罩层下面的标签进行处理。 ...
小程序请求时设置蒙版，放置点击穿透
xiaokangna的博客
12-30 782
小程序在请求时如果用户点击过快就会导致重复请求 这个时候我们可以加一个蒙版，请求完成时才能点击下一个 只需要在请求里加上一个mask为true就可以了 post ( url, data ) { // 数据请求出来前显示的加载动画 wx.showLoading({ title: '正在加载中...', mask:true//请求时蒙版 }) } ...
微信小程序弹出层点击穿透问题
weixin_34228662的博客
04-25 2559
问题描述：使用小程序的modal组件实现遮罩层效果时，会出现滚动穿透的问题，即遮罩层后面的页面依旧可以滚动。 解决方案： 　　给底层页面动态添加position:fixed; 代码： wxml： <modal class="mask" wx:if="{{hasMask}}" bindtap='hideMask'> 我是遮罩层 </modal...
解决微信小程序中的滚动穿透问题
12-13
在微信小程序开发中，经常会遇到一个用户体验上的问题，即“滚动穿透”或称为“蒙层穿透”。这个问题发生在当用户打开一个使用`fixed`布局的蒙层（如弹窗）时，即使手指在蒙层上滑动，底部内容也会跟随滚动。这显然...
解决移动端小程序事件穿透的问题
清颖的博客
12-15 3175
在地图上面写多个小图标，图标位于地图两侧并且都可以点击。要求点击图标时不触发地图的点击事件。如果使用Taro的Map组件开发地图，什么都不处理的情况下，点击小图标时，地图也会被触发点击事件。这不是我们的预期结果。解决方法：pointer-events: visible;
小程序van-button阻止祖先节点出现点击态穿透
jstnflying的博客
11-18 195
给van-button的祖先节点增加hover-class时点击van-button会祖先节点也会出现点击态，使用了catch也会出现，查看小程序文档有提供阻止祖先节点提供的点击态的属性，van-button目前暂未支持该属性，所以目前给van-button增加了一层view，保证button点击时祖先节点不出现点击态穿透问题。
小程序 筛选条件 点击弹出层滚动穿透的问题
xx2410653967的博客
09-08 416
小程序 筛选条件 点击弹出层滚动穿透的问题
微信小程序开发-加载提示时点击穿透问题
最新发布
cuicanxinghui的博客
07-27 148
为true，添加蒙版，此时用户不能对页面进行操作。若false在提示时用户依旧可以对页面进行操作；添加属性mask，其类型为布尔值，
小程序页面滚动穿透
这魏先森-forguo
06-26 5344
小程序页面滚动穿透 一、场景 在项目当中，基础遇到这样的需求 有一个长列表，或者其他可滚动展示的页面， 在这个页面会弹出一个Modal层，如下： 贝壳找房的 的筛选栏 二、问题 如果这个弹框内容不可滚动，不会有太大问题； 但是当弹出内容是可以滚动的时候，就会有问题， 触摸没有滚动的区域会发现滚动可以穿透，会传递给下面的列表页面， 三、解决办法 程序员是面向Google编程的，找到了下面的解决办法： 监听弹框状态，如果弹框展示就给列表 添加对应样式 // isShowMask 弹框是否展示
微信小程序滑动穿透事件处理方案
sdfujichao的博客
04-27 6022
滑动穿透事件处理：亲测可行！在下面这个图中只有箭头值的地方是滑动的区域，但是当用手滑动上部红色区域的时候下面的滑动区域也跟着滑动，这个效果不是我们希望的。给上面红色区域添加这个事件catchtouchmove="move" 。然后在js中在实现这个方法 move: function(){},这样就可以了。其实这个现象的出现就是事件冒泡传递过去了。catchtouchmove属性就是去掉冒泡的事件绑...
ucharts发布到微信小程序点击位置偏移
qq_37012235的博客
03-29 517
问题如标题，解决办法是在微信小程序中添加 inScrollView="true"属性。
微信小程序弹窗滚动穿透问题
林中明月间丶
05-07 2007
转自：https://blog.csdn.net/mcyang0929/article/details/79162090 https://blog.csdn.net/weixin_39429321/article/details/82834041 就是在遮罩层上加上catchtouchmove="ture"，不需要控制任何class和样式等等（因模拟器无touch事件，需在真机测试）。 ...
解决 微信小程序 滚动 事件穿透 问题
gongzuoyongde的博客
12-16 1520
如何彻底解决小程序滚动穿透问题
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值