移动版论坛(500下载币)论坛帮助 微信公众号

天下网吧论坛

 找回密码
 注册账号

QQ登录

只需一步,快速开始

用微信登录

扫一扫,用微信登录

雷柏网咖键盘鼠标 网吧营销大师,让天下没有难开的网咖
查看: 464|回复: 1
收起左侧

[经验分享] 微信小程序textarea层级高各种穿透modal和tabBar的解决方法

[复制链接]
发表于 2020-8-5 10:38:49 | 显示全部楼层 |阅读模式
天下网吧手机APP,你有我有全都有

终于等到您!马上注册登录,做有身份的人!

您需要 登录 才可以下载或查看,没有帐号?注册账号   扫一扫,用微信登录

x
textarea是navite组件,就是所谓的系统原生组件。什么是系统原生组件?就是系统内核直接提供的组件。系统组件的层级会比普通的组件层级高
无论你怎么设置z-index属性,都无法覆盖原生组件,除非这个原生组件已经支持同层级别渲染了。
目前textarea组件还是无法「同层渲染」所以textarea会带来各种「穿透」问题
比如你写了一个z-index的最高级别的modal,一个蒙版。如果蒙版下面有一个textarea组件,里面有值,那么你在真机上显示这个蒙版时,你预期的效果是蒙版完整的覆盖所有内容,事实上你会发现textare无敌穿透了这个蒙版显示给用户看了
同样的情况会发生在自定义tabBar和navigateBar上面,这样textarea一穿透出来就会非常影响整个页面的效果。
如果解决这个问题?
目前有几个思路:
1、不用textarea组件,改用其他的支持同层渲染的组件代替
2、根据实际情况,在可能会出现穿透情况时实时隐藏textarea,比如wxml里面使用wx:if="{{showTextArea}}"这样的判断来隐藏textarea
比如要showModal之前,咱们先把textarea组件先隐藏起来,设置showTextArea为false,modal执行完相关逻辑后再设置showTextArea为true.
3、其他方法,也是根据1,2延伸出来的方法。
微信小程序textarea层级高各种穿透modal和tabBar的解决方法_天下网吧APP_网吧网咖APP
公告 免责声明:本帖为论坛注册用户所发,所说的内容仅代表其个人观点,与天下网吧无关。相关下载资源为坛友自愿上传,相关资源仅供学习用途,勿用在任何商业用途,否则后果自负。与天下网吧无关,如果有侵犯到你的权益烦请来信告知,我们会处理,Email:[email protected](PS:请勿上传和讨论任何盗版,破解的内容)
本站启用全站实名发帖人工先审后发机制,发布后需要人工审核通过后方可展示,所以当你发现自己发的回复或者新主题没显示时不用着急。所以请勿发广告帖,非法帖和无意义的灌水帖,帖子中勿留联系方式,会被认为是广告封号! 坚持宁缺毋滥的原则100年不动摇。回复时请直接回复有用的信息,勿直接留联系方式,否则可能会被封号!
公告 欢迎大家推荐网吧和网咖行业好友加入天下网吧的大家庭,不设门槛完全免费,一起扩大+维护好网吧行业老铁们的最后一块净土。
公告本站帖子为发帖者自发发布,转载请注明来源天下网吧论坛。发帖请遵守相关法律法规!如果分享的软件中有广告,锁主页等行为,请在发帖时注明!!!
公告欢迎大家加入天下网吧QQ群:198018,注意要注明加群原因,否则我保证您进不了群!
公告PS:发求助帖前建议先 【论坛搜索】,那里可能会有你要找的答案;
公告如果求助帖,已经解决了,麻烦您回复下已经解决并分享方法,方便其他同行借鉴您的方法。天下网吧论坛116万会员对您的行为表示感谢!
公告下载币只能通过论坛发帖(尤其是网吧相关的好贴,精华帖),任务,免费获取。不支持任何方式充值,别再联系客服发红包了,没用的!认真回帖是对发帖者的一种尊重!希望大家理解!下载币策略是为了提升大家分享自己的好的网吧相关经验的积极性,如果你分享了你的经验,大家互相学习,我保证你下载币倍增。 免费获取下载币链接
公告本站为方便广大会员方便访问,特意开发了android/iphone版的手机APP下载和微信小程序,用手机访问更自在哦,点击进入下载>>

发表于 2020-8-5 11:48:14 | 显示全部楼层
感谢分享。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册账号   扫一扫,用微信登录

本版积分规则

下载天下网吧手机APP,直接一键登录
您尚未登录,请登陆后浏览更精彩内容!
 注册账号
找回密码

手机版|纯文字版|联系我们|免责声明|网吧论坛 ( 渝ICP备20008032号-2 )|网站地图

GMT+8, 2020-9-28 17:42 , Processed in 0.140625 second(s), 23 queries , Gzip On, MemCache On.

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表