微信小程序textarea层级过高(盖住其他元素)问题的解决办法
前言:这篇文章讲什么
微信小程序中 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 输入一些文字,
然后把页面向上滚动。可以看到文字盖住了底部的操作栏
哪怕我们不输入任何文字,placeholder 也会直接盖住操作栏
注意:请在真机中测试。微信开发者工具中看不到这样的问题。
针对业务场景1(滚动)如何解决?
仅在输入时使用 textarea, 不输入时使用 text 来显示文字。内容为空时 placeholder 用 view 来实现。
所以一共3个元素
<view>负责显示placeholder</view> <textarea>负责输入文字</textarea> <view> <text>负责显示文字(用 text 确保换行正常)</text> </view>
当输入为空时,显示 placeholder,
当输入不为空时,取决于当前有没有 focus 来判断是显示 textarea 还是 负责显示文字的 view
针对业务场景2(弹窗)如何解决?
有弹窗的时候,就用 wx:if 把 textarea 藏起来
本文完
感想:这个破事消耗了我几乎一个下午。同时又对我的技术没有任何提升,只是完成业务需求而已。
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。
相关推荐
-
微信小程序 textarea 层级过高问题简单解决方案
这篇文章主要介绍了微信小程序 textarea 层级过高问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 建立一个新的textarea 组件代替原生textarea ,废话不多说,上代码 <template> <view class="ui-textarea"> <textarea class="textarea {{ hide? 'hidden':''}}" auto-he
-
微信小程序textarea层级过高的解决方法
一.前言 相信做过微信小程序开发的人应该都碰到过这个问题,因为这个需求实在太常见了 由于textarea是属于原生组件,层级最高,不管在页面中我们设置z-index值多少都会被textarea组件遮挡住,很影响用户体验, 目前官方对该问题还没有修复,当然官方也给出了解决该问题的其他方案,使用cover-view和 cover-image替代,但个人感觉并不是很好,有一些限制 二.使用场景及解决方案 1.弹窗显示 2.底部fixed定位的按钮,页面滚动时,例如添加购物车,显示价格 针对以上两种业务
-
一步快速解决微信小程序中textarea层级太高遮挡其他组件
前言 由于小程序中的textarea组件是原生组件,而原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上,造成输入的文字会显示在小程序其他组件上,如下图所示: <view class='bar bottomfix shadow justify-center'> <button class='' formType="submit" type="primary" style='font-size:12pt
-
微信小程序自定义tabBar在uni-app的适配详解
引言:此方法可用作大部分微信小程序支持,但uni-app文档中却找不到相关说明的API 需求 需要在微信小程序中,实现一个中间图标突出显示的异形导航栏. 如下图 实现方法设计 要做这种异形的导航栏,用直接在配置文件里面写list的方法肯定做不到.那么,就有以下两种可替代方法. 在每一个页面都加载一个tabBar组件,与页面同时渲染. 设置自定义tabBar,修改tabBar的样式. 优缺点分析:方法1实现起来略为简单,但是会出现代码可重用率低,降低性能,已经界面跳动等问题.方法2则是微信官方提供
-
微信小程序 textarea 组件详解及简单实例
微信小程序textarea 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 多行输入框. 属性名 类型 默认值 说明 value String 输入框的内容 placeholder String 输入框为空时占位符 placehold
-
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
看了很多帖子,但是效果都不是很好.还是找微信小程序官方文档,自己写比较方便.自己动手丰衣足食!话不多说,上代码! 时空传送 先来个效果图 html <block wx:for='{{trendsList}}' wx:key='index'> <view class="box"> <view class="textFour_box {{item.seeMore?'three':''}}">{{item.text}}</view
-
微信小程序 textarea 详解及简单使用方法
微信小程序 textarea 简易解决方案 微信小程序中textarea没有bindchange事件,所以无法在输入时给变量赋值. 虽然可以使用bindblur事件,但是绑定bindblur事件,如果再点击按钮,则先执行完按钮事件后,再去执行bindblur事件,所以在js文件取不到输入值, 解决方法:结合from表单,textarea文本框输入后,再去点击提交按钮,这时会先执行textarea事件(获取文本框输入内容),再去执行数据提交,这样问题就解决了 wxml文件代码: <form bin
-
微信小程序实现分享商品海报功能
我们在微信小程序中经常会使用到分享商品海报,或者是重绘微信小程序分享链的图片功能.实现该功能只要跟着如下几个步骤就可以快速实现啦!(本文示例代码使用的是uni-app,原生或者其他框架需要将uni前缀该成对应框架前缀即可:) 步骤描述不清晰或者不想看步骤?那就直接访问完整代码地址吧 完整代码演示:微信小程序 - 分享商品海报 相关文档: uni-app官方文档 微信小程序官方文档 第一步:提前将需要分享的图片素材先缓存至本地临时图片路径: initPic(){ this.handleNetImg
-
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
前言:这篇文章讲什么 微信小程序中 textarea 组件的层级过高如何解决 前言:这篇文章对谁有用 微信小程序开发者 前言:本文有什么用? 提供解决问题的思路,供你参考 (因为时间关系,我没法把代码整理的好好的然后贴出来让你复制黏贴.或者是做成一个组件然后开源) 前言:本文时效性 截止至2018年10月30号,微信的 textarea 还是以原生组件形式实现,因此层级最高.无法通过 z-index 进行调整.在微信小程序官方把 textarea 改成了可以控制层级之前.本文中的内容会一直有效.
-
微信小程序wx.request使用POST请求时后端无法获取数据解决办法
遇到的坑: 例如在写微信小程序接口时,method请求方式有POST和GET两种,为了数据安全,我们会偏向于使用POST请求方式访问服务器端: 当我们使用POST方式请求时,后端无法获取到传送的参数,但使用GET方式却是可以的. 解决办法: 设置请求的 header头: header: { "Content-Type": "application/x-www-form-urlencoded" }, 特别注意:post请求必须写method: 'POST',因为wx.
-
微信小程序报错:this.setData is not a function的解决办法
微信小程序 报错:this.setData is not a function 在page中定义的代码如下,代码会报错:this.setData is not a function <strong> pasteEncryptedText:function()</strong>{ let decryptedPass = this.data.decryptedPassword; if (decryptedPass == '' ){ wx.showToast({ title: '请先输入
-
微信小程序 picker-view 组件详解及简单实例
picker-view 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 嵌入页面的滚动选择器 属性名 类型 默认值 说明 value Number Array 数组中的数字依次表示 picker-view 内的 picker
-
微信小程序 slider 详解及实例代码
微信小程序slider 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 滑动选择器 属性名 类型 默认值 说明 min Number 0 最小值 max Number 100 最大值 step Number 1 步长,取值必须大
-
微信小程序 input输入框详解及简单实例
微信小程序输入框input 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 微信小程序输入框input 属性名 类型 默认值 说明 value String 输入框的内容 type String text input的类型,
随机推荐
- Vue.js常用指令汇总(v-if、v-for等)
- Swift教程之字符串和字符详解
- 终极dos批处理for循环命令详解
- java当中的定时器的4种使用方式
- 配置PHP使之能同时支持GIF和JPEG
- PHP中preg_match函数正则匹配的字符串长度问题
- C\C++ 获取当前路径实例详解
- javascript:以前写的xmlhttp池,代码
- Javascript调试脚本的经验之谈第1/2页
- java压缩多个文件并且返回流示例
- VBS调用Windows API函数的代码
- SQL查询入门(中篇)
- sqlserver 脚本和批处理指令小结
- SQL语句实现删除ACCESS重复记录的两种方法
- jquery创建表格(自动增加表格)代码分享
- Windows XP中的18个秘密武器
- Android应用开发中Fragment存储功能的基本用法
- Android实现下载zip压缩文件并解压的方法(附源码)
- Android中截取当前屏幕图片的实例代码
- Web Service 运行原理详细介绍