微信小程序textarea层级过高(盖住其他元素)问题的解决办法


Posted in Javascript onMarch 04, 2019

前言:这篇文章讲什么

微信小程序中 textarea 组件的层级过高如何解决

前言:这篇文章对谁有用

微信小程序开发者

前言:本文有什么用?

提供解决问题的思路,供你参考

(因为时间关系,我没法把代码整理的好好的然后贴出来让你复制黏贴。或者是做成一个组件然后开源)

前言:本文时效性

截止至2018年10月30号,微信的 textarea 还是以原生组件形式实现,因此层级最高。无法通过 z-index 进行调整。在微信小程序官方把 textarea 改成了可以控制层级之前。本文中的内容会一直有效。

1. 问题描述

根据官方文档,textarea 是原生组件 (https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html),所谓原生组件就是 “脱离在 WebView 渲染流程外”

文档中的原话是:

原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。

造成的问题:

在一个可以滚动的页面中。textarea 中的文字会覆盖在 position: fixed 的元素上方

经典业务场景1:

页面底部有一个固定的操作栏,比如"加入购物车"。"立即购买", 显示价格等

经典业务场景2:

页面中有弹窗

问题截图

我们先往页面上放2个 textarea

微信小程序textarea层级过高(盖住其他元素)问题的解决办法

微信小程序textarea层级过高(盖住其他元素)问题的解决办法

此时看起来暂时一切正常。

我们把底下的 textarea 输入一些文字,

微信小程序textarea层级过高(盖住其他元素)问题的解决办法

然后把页面向上滚动。可以看到文字盖住了底部的操作栏

微信小程序textarea层级过高(盖住其他元素)问题的解决办法

哪怕我们不输入任何文字,placeholder 也会直接盖住操作栏

微信小程序textarea层级过高(盖住其他元素)问题的解决办法

注意:请在真机中测试。微信开发者工具中看不到这样的问题。

针对业务场景1(滚动)如何解决?

仅在输入时使用 textarea, 不输入时使用 text 来显示文字。内容为空时 placeholder 用 view 来实现。
所以一共3个元素

<view>负责显示placeholder</view>
  <textarea>负责输入文字</textarea>
  <view> <text>负责显示文字(用 text 确保换行正常)</text> </view>

当输入为空时,显示 placeholder,

当输入不为空时,取决于当前有没有 focus 来判断是显示 textarea 还是 负责显示文字的 view

针对业务场景2(弹窗)如何解决?

有弹窗的时候,就用 wx:if 把 textarea 藏起来

本文完

感想:这个破事消耗了我几乎一个下午。同时又对我的技术没有任何提升,只是完成业务需求而已。

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

Javascript 相关文章推荐
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
JavaScript Dom实现轮播图原理和实例
Feb 19 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 #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
You might like
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
jquery 分页控件实现代码
2009/11/30 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
layui.js实现的表单验证功能示例
2017/11/15 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
python tkinter控件布局项目实例
2019/11/04 Python
python实现图片横向和纵向拼接
2020/03/05 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
关键字throw与throws的用法差异
2016/11/22 面试题
机关门卫岗位职责
2013/12/30 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
四年级下册教学反思
2014/02/01 职场文书
经典婚礼主持词
2014/03/13 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
Pygame如何使用精灵和碰撞检测
2021/11/17 Python
MySQL创建表操作命令分享
2022/03/25 MySQL
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers