微信小程序textarea層級過高(蓋住其他元素)

根據官方文檔，textarea 是原生組件 (https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html)，所謂原生組件就是 “脫離在 WebView 渲染流程外”

文檔中的原話是：

原生組件的層級是最高的，所以頁面中的其他組件無論設置 z-index 為多少，都無法蓋在原生組件上。

頁面中有彈窗彈出層時，點擊彈出層時，底層的textarea也會顯示出來，設置z-index沒作用。

注意：請在真機中測試。微信開發者工具中看不到這樣的問題。

針對彈窗如何解決？

找了個笨方法，有彈窗的時候，就用 wx:if 把 textarea 藏起來，彈出層隱藏的時候再顯示 textarea。

關閉彈出層的時候再顯示 textarea。

例如：

<view class='form-item flex-row'>
        <view class='flex05 ali-center'>
          <text class='iconfont icon-gonggao f40 green pr8'></text>
          <text class="f30">選擇類型：</text>
        </view>
        <view class='flex1 text-ar flex-row ali-center'>
          <view class="flex-grow-1 f30" style="text-align: right;padding-right:10rpx" bindtap="toggleDialog">
            {{selname}}{{value}}
          </view>
          <text class='iconfont icon-jiantou'></text>
        </view>
</view>
<!-- 彈出層 -->
<view bindtap="hideView">
      <view class="free-dialog {{ showDialog ? 'free-dialog--show' : '' }}">
        <view class="free-dialog__mask" bindtap="toggleDialog"></view>
        <view class="free-dialog__container">
          <view>
            <form bindsubmit='submit' bindreset="reset">
              <radio-group class='free-radios' bindchange="radioChange">
                <label class="free-radio" bindtap="clicked" wx:for="{{noticeType}}" wx:key="{{noticeType}}" data-idx="{{index}}" >
                  <radio value="{{item.NoticeTypeName}}" name="{{item.NoticeTypeName}}"></radio>
                  <label class="free-text">{{item.NoticeTypeName}}</label>
                  <label hidden="{{item.TemplateCount == 0}}" class="free-icon" bindtap="toTemplate" data-id="{{item.NoticeTypeID}}">查看模板</label>
                  <label hidden="{{item.TemplateCount != 0}}">暫無模板</label>
                </label>
              </radio-group>
            </form>
          </view>
        </view>
      </view>
</view>
<!--文本區域輸入框-->
<view class="textarea f30">
        <textarea name="noticeContent" maxlength="-1" hidden="{{noTextarea}}" bindinput="onchangenotice" value='{{noticeContent}}' placeholder="溫馨提示：。。。。。。）" auto-height cursor-spacing="100"
        ></textarea>
</view>

js：

data: {
    showDialog: false, // 彈出層
    noTextarea: false, // textarea彈出層的時候隱藏
},

radioChange: function (e) {
    console.log('radio發生change事件，攜帶value值為：', e.detail.value)
    var that = this
    that.setData({
      selname: '',
      value: e.detail.value,
      noTextarea: false,
    })
    console.log(this.data.value)
},
// 顯示彈出層
toggleDialog() {
    this.setData({
      showDialog: !this.data.showDialog,
      noTextarea: true
    });
},
//點擊其他位置隱藏遮罩層
hideView: function () {
    var that = this;
    that.setData({
      noTextarea: false,
    })
},
// 點擊選中
clicked: function (e) {
    var idx = e.currentTarget.dataset.idx;
    var that = this
    that.setData({
      NoticeTypeID: this.data.noticetype[idx].NoticeTypeID,
      showDialog: !this.data.showDialog,
      noTextarea: false,
    })
    console.log(this.data.NoticeTypeID)
},