一步快速解决微信小程序中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 相关文章推荐
flash javascript之间的通讯方法小结
Dec 20 Javascript
JQuery 学习笔记 选择器之三
Jul 23 Javascript
js 学习笔记(三)
Dec 29 Javascript
jquery插件 cluetip 关键词注释
Jan 12 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
基于JavaScript实现猜数字游戏代码实例
Jul 30 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php header()函数使用说明
2008/07/10 PHP
php实现快速排序法函数代码
2012/08/27 PHP
php列出一个目录下的所有文件的代码
2012/10/09 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
什么是servlet链?
2014/07/13 面试题
会计师职业生涯规划范文
2014/02/18 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
节能环保家庭事迹材料
2014/08/27 职场文书
先进党员事迹材料
2014/12/24 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
千与千寻观后感
2015/06/04 职场文书
员工安全责任协议书
2016/03/22 职场文书
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
js 数组 fill() 填充方法
2021/11/02 Javascript