微信小程序textarea层级过高的解决方法


Posted in Javascript onMarch 04, 2019

一、前言

相信做过微信小程序开发的人应该都碰到过这个问题,因为这个需求实在太常见了

由于textarea是属于原生组件,层级最高,不管在页面中我们设置z-index值多少都会被textarea组件遮挡住,很影响用户体验,

目前官方对该问题还没有修复,当然官方也给出了解决该问题的其他方案,使用cover-view和 cover-image替代,但个人感觉并不是很好,有一些限制

二、使用场景及解决方案

1、弹窗显示

2、底部fixed定位的按钮,页面滚动时,例如添加购物车,显示价格

针对以上两种业务场景解决方式不同

针对场景1弹窗显示的处理方式

在显示弹窗时通过if或者绑定class属性将textarea组件隐藏,弹窗关闭时显示,如下

<div class="section" :class="isShowInput?'':'hidden'">
 <textarea class="content" placeholder="输入内容" v-model="userInfo"></textarea>
 </div>

针对场景2(滚动)如何解决

我们在输入时使用textarea组件,不输入的时候text来显示文字和placeholder,这样我们需要单独设置几个标签

<textarea>输入内容</textarea>
<scroll-view>用于显示文本内容</scroll-view>
<div class="placeholder" v-if="!content">说说对这个活动看法吧</div>

通过v-show来显示或隐藏该组件,使用scroll-view标签为文本内容设置可滚动,这里设置了isFocus聚焦,通过按钮的形式去触发textaare的Focus

完整代码如下:

<textarea
 v-model="content"
 @blur="bindContentBlur"
 v-show="isInputContentFocus"
 placeholder="说说对这个活动看法吧"
 v-bind:focus="isFocus"
 ></textarea>

 <scroll-view
 scroll-y
 class="content"
 v-text="content"
 @click="bindContentFocus"
 v-show="isContentFocus"
 >
 <div class="placeholder" v-if="!content">说说对这个活动看法吧</div>
 </scroll-view>

data() {
 return {
 isContentFocus: true,
 isInputContentFocus: false,
 isFocus: false
 };
 },

 methods: {
 bindContentFocus(e) {
 this.isFocus = true; //触发焦点
 this.isContentFocus = false; //聚焦时隐藏内容文本标签
 this.isInputContentFocus = true;
 console.log("Focus isFocus", this.isFocus);
 },
 bindContentBlur(e) {
 this.isContentFocus = true; //聚焦时隐藏内容文本标签
 this.isInputContentFocus = false;
 this.isFocus = false; //失去焦点
 console.log("Blur isFocus", this.isFocus);
 }
 }

三、其他方式

官方给出了针对textarea的解决方式,使用cover-view和 cover-image替代,这两个组件也是原生组件,可以覆盖textarea组件

cover-image

<cover-view class="btn-save">
 <button
 class="btn btn-love btn-apply"
 @click="apply"
 :disabled="apply_status"
 v-text="apply_status?'我已报名':'我要报名'"
 ></button>
 </cover-view>

不过这里有个限制就是<cover-view/> 内只能嵌套 <cover-view/> <cover-image/> <button/> <navigator/>组件,view 标签的子节点树在真机上都会被忽略。

像上面场景2的需求,添加购物车,显示价格,很明显这种方式并不适用,当然如果底部我们只有一个button的话是可以使用这种方式去解决的

参考阅读

  • https://3water.com/article/157304.htm
  • https://3water.com/article/157306.htm

总结

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

Javascript 相关文章推荐
JS getStyle获取最终样式函数代码
Apr 01 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 Javascript
JavaScript函数模式详解
Nov 07 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
简单的js表格操作
Sep 24 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
JavaScript代理模式原理与用法实例详解
Mar 10 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
浅析vue中的MVVM实现原理
Mar 04 #Javascript
JavaScript实现的九种排序算法
Mar 04 #Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 #Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 #Javascript
Vuex mutitons和actions初使用详解
Mar 04 #Javascript
JS重学系列之聊聊new操作符
Mar 04 #Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 #jQuery
You might like
多php服务器实现多session并发运行
2006/10/09 PHP
几种显示数据的方法的比较
2006/10/09 PHP
PHP nl2br函数 将换行字符转成 &amp;lt;br&amp;gt;
2009/08/21 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
Python中new方法的详解
2019/01/15 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
家乐福台湾线上购物网:Carrefour台湾
2020/09/15 全球购物
物流管理专业大学生自荐信
2013/10/04 职场文书
火烧圆明园观后感
2015/06/03 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL