一步快速解决微信小程序中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 相关文章推荐
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
vue v-for直接循环数字实例
Nov 07 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 gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
详解WordPress中调用评论模板和循环输出评论的PHP函数
2016/01/05 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
使用python加密自己的密码
2015/08/04 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
《寓言两则》教学反思
2014/02/27 职场文书
毕业生自荐信格式
2014/03/07 职场文书
购房协议书
2014/04/11 职场文书
请假条的格式
2014/04/11 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2014年女职工工作总结
2014/11/27 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android