微信小程序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的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
angular实现form验证实例代码
Jan 17 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
浅析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获取真实客户端的真实IP
2017/03/07 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
jquery 问答知识整理
2010/02/11 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
Vue实现简易计算器
2020/02/25 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
Python列表(list)常用操作方法小结
2015/02/02 Python
在Python的setuptools框架下生成egg的教程
2015/04/13 Python
Python实现简单登录验证
2016/04/13 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
python实现批量修改文件名
2020/03/23 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
品管员岗位职责
2013/11/10 职场文书
温馨提示标语
2014/06/26 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
个人借款协议书范本
2014/11/17 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
雷锋的观后感
2015/06/10 职场文书