微信小程序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)
},