微信小程序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 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
详解node.js的http模块实例演示
Jul 12 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
Vuex实现数据增加和删除功能
Nov 11 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
JS重学系列之聊聊new操作符
Mar 04 #Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 #jQuery
You might like
PHP中的integer类型使用分析
2010/07/27 PHP
8个必备的PHP功能开发
2015/10/02 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
JavaScript中的面向对象介绍
2012/06/30 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
详解Bootstrap插件
2016/04/25 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
学习python (1)
2006/10/31 Python
Python subprocess模块学习总结
2014/03/13 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
把pandas转换int型为str型的方法
2019/01/29 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
利用Python优雅的登录校园网
2020/10/21 Python
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
一个大学生十年的职业规划
2014/01/17 职场文书
入党自我评价优缺点
2014/01/25 职场文书
贪污检举信范文
2015/03/02 职场文书
学校推普周活动总结
2015/05/07 职场文书
宣传稿格式范文
2015/07/23 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
python Tkinter模块使用方法详解
2022/04/07 Python