微信小程序textarea层级过高的问题及解决办法

发布时间: 2019-03-04

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

v-model="content"

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

在显示弹窗时通过if或者绑定class属性将textarea组件隐藏,弹窗关闭时显示,如下 <div class="section" :class="isShowInput?'':'hidden'">

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

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

v-show="isInputContentFocus"

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

1、弹窗显示

</div>

我们在输入时使用textarea组件,不输入的时候text来显示文字跟placeholder,这样咱们需要单独设置多少个标签<textarea>输入内容</textarea>

二、使用途景及解决打算

@blur="bindContentBlur"

完整代码如下:<textarea

<div class="placeholder" v-if="!content">说说对这个运动看法吧</div>

placeholder="说说对这个活动看法吧"

<textarea class="content" placeholder="输入内容" v-model="userInfo"></textarea>

一、前言

信赖做过微信小程序开发的人应该都碰到过这个问题,因为这个须要切实太常见了,由于textarea是属于原生组件,层级最高,不管在页面中咱们设置z-index值多少都会被textarea组件遮挡住,很影响用户闭会,目前官方对该问题还不修复,当然官方也给出理解决该问题的其余计划,应用cover-view跟 cover-image调换,但个人觉得并不是很好,有一些限度。

<scroll-view>用于显示文本内容</scroll-view>