一步快速解决微信小程序中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来定位
Feb 20 Javascript
用JavaScript调用WebService的示例
Apr 07 Javascript
js propertychange和oninput事件
Sep 28 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
vue 组件开发原理与实现方法详解
Nov 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
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
python数据化运营的重要意义
2019/11/25 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
小学生读书感言
2014/02/12 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
总经理助理的职责
2014/03/14 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
国庆横幅标语
2014/10/08 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
vue 给数组添加新对象并赋值
2022/04/20 Vue.js
python实现双向链表原理
2022/05/25 Python