一、前言
相信做过微信小程序开发的人应该都碰到过这个问题,因为这个需求实在太常见了,由于textarea是属于原生组件,层级最高,不管在页面中我们设置z-index值多少都会被textarea组件遮挡住,很影响用户体验,目前官方对该问题还没有修复,当然官方也给出了解决该问题的其他方案,使用cover-view和 cover-image替代,但个人感觉并不是很好,有一些限制。
![ab36079cff6f3e0f833e0ea51557ba0d.png](https://i-blog.csdnimg.cn/blog_migrate/27e34d7fd3799f4691968e063127a960.jpeg)
二、使用场景及解决方案
1、弹窗显示
2、底部fixed定位的按钮,页面滚动时,例如添加购物车,显示价格
针对以上两种业务场景解决方式不同
针对场景1弹窗显示的处理方式
在显示弹窗时通过if或者绑定class属性将textarea组件隐藏,弹窗关闭时显示,如下
针对场景2(滚动)如何解决
我们在输入时使用textarea组件,不输入的时候text来显示文字和placeholder,这样我们需要单独设置几个标签
输入内容用于显示文本内容
说说对这个活动看法吧
通过v-show来显示或隐藏该组件,使用scroll-view标签为文本内容设置可滚动,这里设置了isFocus聚焦,通过按钮的形式去触发textaare的Focus
完整代码如下:
说说对这个活动看法吧
data() { return { isContentFocus: true, isInputContentFocus: false, isFocus: false }; }, methods: { bindContentFocus(e) { this.isFocus = true; //触发焦点 this.isContentFocus = false; //聚焦时隐藏内容文本标签 this.isInputContentFocus = true; console.log("Focus isFocus