一步快速解决微信小程序中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 相关文章推荐
$()JS小技巧
Jul 21 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 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设置进度条的方法
2015/07/08 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
PHP中overload与override的区别
2017/02/13 PHP
PHP7多线程搭建教程
2017/04/21 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
轻松实现js图片预览功能
2016/01/18 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
python中的闭包用法实例详解
2015/05/05 Python
Python创建模块及模块导入的方法
2015/05/27 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
python中PyQuery库用法分享
2021/01/15 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
2015年团支书工作总结
2015/04/03 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android