一, 前言
相信做过微信小程序开发的人应该都碰到过这个问题, 因为这个需求实在太常见了
由于 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-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://blog.csdn.net/huobox/article/details/84859712
- https://1c7.me/2018-10-30-wechat-mini-program-textarea-z-index-problem/
来源: https://www.cnblogs.com/fozero/p/10466123.html