關於微信小程式textarea層級過高問題解決

摘要： 一、前言 相信做過微信小程式開發的人應該都碰到過這個問題，因為這個需求實在太常見了 由於textarea是屬於原生元件，層級最高，不管在頁面中我們設定z-index值多少都會被textarea元件遮擋住，很影響使用者體驗， 目前官方對該問題還沒有修復，當然官方也給出瞭...

一、前言

相信做過微信小程式開發的人應該都碰到過這個問題，因為這個需求實在太常見了

由於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://blog.csdn.net/huobox/article/details/84859712

https://1c7.me/2018-10-30-wechat-mini-program-textarea-z-index-problem/