一步快速解决微信小程序中textarea层级太高遮挡其他组件


Posted in Javascript onMarch 04, 2019

前言

由于小程序中的textarea组件是原生组件,而原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上,造成输入的文字会显示在小程序其他组件上,如下图所示:

一步快速解决微信小程序中textarea层级太高遮挡其他组件

<view class='bar bottomfix shadow justify-center'>

<button class='' formType="submit" type="primary" style='font-size:12pt;border:0px;width:300px;'> 保 存</button>

</view>

网上有一些绕弯路的解决办法,其实小程序有一个直接解决原生组件覆盖问题的办法,就是使用cover-view,小程序为了解决原生组件层级最高的限制。小程序专门提供了 cover-view 和 cover-image 组件,可以覆盖在部分原生组件上面。这两个组件也是原生组件,但是使用限制与其他原生组件有所不同。

上方覆盖部分改为如下即可:

<cover-view class='bar bottomfix shadow justify-center'>

<button class='' formType="submit" type="primary" style='font-size:12pt;border:0px;width:300px;'> 保 存</button>

</cover-view>

效果如下,动手试试吧!

一步快速解决微信小程序中textarea层级太高遮挡其他组件

到此就解决了遮盖问题

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
微信小程序实现红包雨功能
Jul 11 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 #Javascript
微信小程序textarea层级过高的解决方法
Mar 04 #Javascript
浅析vue中的MVVM实现原理
Mar 04 #Javascript
JavaScript实现的九种排序算法
Mar 04 #Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 #Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 #Javascript
Vuex mutitons和actions初使用详解
Mar 04 #Javascript
You might like
php 阴历-农历-转换类代码
2012/01/16 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
ES6关于Promise的用法详解
2018/05/07 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
使用python Django做网页
2013/11/04 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
Python List cmp()知识点总结
2019/02/18 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
2016/08/25 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
捐款倡议书范文
2014/02/02 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
亲子活动总结
2014/04/26 职场文书
班主任个人工作反思
2014/04/28 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
《自己去吧》教学反思
2016/02/16 职场文书