關於微信小程序textarea層級太高問題解決

1、前言

相信作過微信小程序開發的人應該都碰到過這個問題，由於這個需求實在太常見了
因爲textarea是屬於原生組件，層級最高，無論在頁面中咱們設置z-index值多少都會被textarea組件遮擋住，很影響用戶體驗，

目前官方對該問題尚未修復，固然官方也給出瞭解決該問題的其餘方案，使用cover-view和 cover-image替代，但我的感受並非很好，有一些限制

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);
    }
  }

3、其餘方式

官方給出了針對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/