这篇文章主要介绍“小程序中textarea层级过高穿透问题怎么解决”,在日常操作中,相信很多人在小程序中textarea层级过高穿透问题怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”小程序中textarea层级过高穿透问题怎么解决”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联自2013年起,先为封丘等服务建站,封丘等地企业,进行企业商务咨询服务。为封丘企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
自从做小程序以来,就遇到了好多坑,其中一个就是textarea层级过高,会穿透其他层次,这时候用z-index也是不管用的。 官方是这么说的: >小程序框架为了优化体验,部分组件如map、video、textarea、canvas通过原生控件实现,原生组件层级高于前端组件,为了能正常覆盖原生组件,设计了cover-view。
所以说用cover-view就可以了,但是在用cover-view的时候也有好多坑,这就导致使用cover-view会不起作用或者cover-view里的组件也不显示了,接下来我就描述一下我已经实现好的方案,希望能帮到大家。 我这边的需求是底下有个提交按钮,但是上面的textarea会穿透过提交按钮,体验很不好。
一开始我是这边写的:
<cover-view><view>提交</view></cover-view>
也是看了好多博文说这些写真机上不显示,我这边也是这样,后来才发现了报错信息。
后来我就把代码变成了这样:
<cover-view> <button>提交</button> </cover-view> // 样式 button{ position: fixed; bottom: 0rpx; margin: auto; width: 100%; height: 37px; background-color: #0090FF; color: #FFFFFF; font-size: 34rpx; line-height: 37px; text-align: center; }
但是这样依然不显示:通过给cover-view加背景颜色调试,发现cover-view没有高:
好使的版本:
<cover-view> <button>提交</button> </cover-view> // 样式 button{ position: fixed; bottom: 0rpx; margin: auto; width: 100%; height: 37px; background-color: #0090FF; color: #FFFFFF; font-size: 34rpx; line-height: 37px; text-align: center; } cover-view{ height: 37px; position: fixed; bottom: 0; width: 100%; z-index: 9999; }
所以是要给cover-view加样式啊...
到此,关于“小程序中textarea层级过高穿透问题怎么解决”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
新闻标题:小程序中textarea层级过高穿透问题怎么解决
文章分享:https://www.cdcxhl.com/article12/ieshgc.html
成都网站建设公司_创新互联,为您提供软件开发、搜索引擎优化、定制网站、企业建站、响应式网站、网站设计
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联