cover-view 解决微信小程序input、textarea层级穿透问题

最新推荐文章于 2023-01-18 15:06:03 发布
原创 最新推荐文章于 2023-01-18 15:06:03 发布 · 4.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍使用cover-view组件解决微信小程序中input、textarea层级穿透问题的方法。通过设置cover-view的定位及高z-index值，有效避免输入框被遮挡的情况。同时，因cover-view不支持背景色设置，建议用图片替代。

cover-view 解决微信小程序input、textarea层级穿透问题 cover-view 设置定位，然后给z-index：9999；

小程序cover-view不支持背景颜色设置 可以用图片进行代替

wangyanxin928
关注
微信小程序-如何解决input、textarea层级穿透？【亲测有效】
**My Coding Family**
03-23 2406
微信小程序-如何解决input、textarea层级穿透？【亲测有效】
微信小程序通过cover-view解决textarea层级过高穿透问题
weixin_44379204的博客
06-15 2531
自从做小程序以来，就遇到了好多坑，其中一个就是textarea层级过高，会穿透其他层次，这时候用z-index也是不管用的。 官方是这么说的： 小程序框架为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件，为了能正常覆盖原生组件，设计了cover-view。 所以说用cover-view就可以了，但是在用cover-view的时候也有好多坑，这就导致使用cover-view会不起作用或者cover-view里的组件也不显示了，接下来我就描
微信小程序之cover-view
03-29
前言 最近公司有个项目需要用到小程序的map组件，要实现一个类似摩拜红包车的信息弹框,简单说就是在map组件上添加自定义view。  摩拜红包车 (此图片来源于网络，如有侵权，请联系删除! ) 直接在map上使用view，image等是不行的，因为查看微信小程序API底部Bug&Tip有一句话，map 组件是由客户端创建的原生组件，它的层级是最高的。所以直接在map上使用view等没有效果的，即使使用z-index改变z轴也是没用的，网上也查了很多，都说是没办法使用这种布局的。  后来仔细查看微信小程序API文档，发现一个控件cover-view,没错，就是今天的主角。查看文档第一行发现有这么
input层级高 小程序_解决微信小程序input、textarea层级过高穿透问题
weixin_31910545的博客
12-24 685
微信小程序原生组件camera、canvas、input(仅在focus时表现为原生组件)、live-player、live、pusher、map、textarea、video的层级是最高的，页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。从图中效果可以看出input输入的内容穿透到了选择列表自定义组件，解决办法：1、使用if，当触发选择列表时隐藏input或textare...
微信小程序input层级穿透解决
死亡的挽歌的博客
10-09 4901
微信小程序里面，由于input是原生组件，所以会存在层级穿透的问题，view标签无法覆盖在上面，点击的时候，下面的input组件会被聚焦，下面记录一下解决方法 解决方法 1.使用cover-view代替view（不太推荐） 该方法适合覆盖在上的input标签上的东西样式不太复杂，因为cover-view标签支持的css有缺失，而且cover-view标签在动画切换的时候会最先出现在屏幕中，最迟消失在屏幕中，体验不太好 2.使用view代替input（推荐） 在input同级创建一个view标签，然后在css
一步快速解决微信小程序中textarea层级太高遮挡其他组件
10-17
主要给大家介绍了关于如何通过一步快速解决微信小程序中textarea层级太高遮挡其他组件问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习...
微信小程序textarea层级过高的解决方法
10-17
解决微信小程序textarea层级过高的问题，可以通过控制textarea的显示与隐藏、结合其他组件的使用，以及利用cover-view和cover-image等原生组件进行覆盖。根据实际业务场景选择合适的解决方案，以保证用户界面的正常...
微信小程序中textarea的层级问题
wzszjy2的博客
07-30 931
微信小程序中textarea是原生组件，因些并不能完全像普通html中的textarea一样使用。 使用过这个组件的人都会发现，部分htm属性l和css设置现阶段是无效的。
小程序textarea穿透问题
Depressiom的博客
01-06 355
当有fixed元素时，无论设置多少z-index值，textarea组件都会穿透该fixed元素。
解决微信小程序input、textarea层级过高穿透问题
热门推荐
山水子农
03-09 2万+
  微信小程序原生组件camera、canvas、input（仅在focus时表现为原生组件）、live-player、live、pusher、map、textarea、video的层级是最高的，页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。 从图中效果可以看出input输入的内容穿透到了选择列表自定义组件，解决办法：   1、使用if，当触发选择列表时隐藏input或...
解决微信小程序中的滚动穿透问题
12-13
Mask-Scroll > 原码地址 * 蒙层防穿透问题 > 蒙层穿透就是，当你用fixed 布局让蒙层显示的时候， 手指滑动屏幕会出现底部内容也滑动的现象. 如图： 当蒙层出现的时候，你滚动屏幕，底部内容也一起跟着滚动。 这就是蒙层穿透， 也可以叫 ‘滚动穿透’. 当然出现这种情况， 用户体验当然是不好的了。 所以作为一个有点追求的工程师当然是不允许这种情况的发生了(手动狗头…) ## 解决方案 这种要分情况， 当蒙层没有滚动条的时候。 当蒙层出现滚动条的时候 1. 当弹窗没有滚动条的时候。 直接监听 catch:touchmove 方法， 然后直接返回就可以了。 代码可以去看f
微信小程序textarea穿透问题
lixiangping110的专栏
03-02 1625
微信小程序输入大段文字，需要使用textarea组件，但是原生组件层级最高，导致有弹窗等组件时候，点击弹窗的界面，会出现textarea拿到点击事件，显示光标。 1.微信官方网站推荐，使用cover-view组件包含button，当时如果有text等组件，则编译会提示异常，cover-view只支持几种控件。在模拟器上面，已经可以实现不被textarea控件拿到，但是...
小程序一奇奇怪怪的bug——input层级穿透
weixin_46121939的博客
01-18 1239
样式穿透
微信小程序input、textarea层级过高的穿透问题如何解决
chali1314的博客
03-28 5340
微信小程序原生组件camera、canvas、input（仅在focus时表现为原生组件）、live-player、live、pusher、map、textarea、video的层级是最高的，页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上，所以会出现穿透现象。比如，有一个列表弹窗，弹窗下面挡着一个input，当点击列表某一项时，如果这一项刚好跟下面的input输入框重合，则会出现下面input获取焦点显示的情况，这个就是穿透现象。 解决办法如下： 1、使用if，当触发选择列表..
微信小程序中cover-view的层级不受z-index控制
大梦的博客
12-13 9889
在做小程序中的地图时，遇到已奇怪的问题，cover-view不受z-index控住，后来几经折腾，得出如下结论。（不知道后面腾讯方会不会优化这个问题） 这是在小程序里做的一个地图，上面的所有的都得用cover-view，cover-image。问题是cover-view，cover-image的层级不受z-index影响。如上图，上面分三块，层级排序分别是（1）<（2）<（3）。 通...
使用cover-view覆盖小程序原生组件，解决原生组件层级最高的问题
xuan2717的博客
05-15 488
使用cover-view覆盖小程序原生组件，解决原生组件层级最高的问题
input层级高 小程序_「小程序」map组件层级之上实现cover-input
weixin_39795971的博客
01-14 280
前言现在是2019年1月初，小程序官方还没有发布cover-input等组件，在map层级之上可操作的组件只有cover-view、cover-image正文map组件属于原生组件，层级最高，能在map层级之上可操作的组件只有cover-view、cover-image，现有需求在map组件上层浮现弹框，可输入(input)在真机上原生input组件嵌在内会被忽略导致实现思路：input用来输入内...
【修复日常bug】解决微信小程序cover-view使用position:fixed；不显示的问题
技术大咖 Rohlin的博客
07-27 5784
我们看微信官方api说明 tip: 基础库 1.9.90 起最外层cover-view支持position: fixed 然后我们开发的过程中发现使用了position:fixed无效，首先应该检查一下基础库是否是1.9.90或以上，开发者工具详情按钮可以查看基础库版本号： 如果基础库版本号是1.9.90或以上我们就可以排除这个原因，还有一个原因就是我们cover-...
微信小程序 textarea组件层级过高导致文字穿透浮层的解决方法
mossbaoo的博客
02-13 3738
页面中有一个fixed浮层，就算把层级设置到9999了，textarea的placeholder文字或者输入的文字内容都会直接穿透浮层，显示在浮层的上面。如下图：   解决方法： 再写一个样式跟textarea一样的view。当浮层出现时，隐藏textarea，显示模拟的textarea，即以下代码的isShow: true <view class="textarea" wx:...
微信小程序-如何解决input、textarea层级穿透？
最新发布
09-15
微信小程序中，`input` 和 `textarea` 元素有时会出现层级穿透的问题，即它们的输入框可能会出现在遮罩层（如模态框）之外，用户难以正常操作。这通常是由于组件层级设置不当导致的。为了解决这个问题，可以采取以下...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值