微信小程序textarea層級太高怎麼解決

我遇到的情況是：textarea的高度是自適應的，auto-height={{true}}，但是表單中有一個picker-view，textarea層級高，裏面的內容和placeholder會展示在最上層。
解決辦法思路：給一個隱藏的rich-text（text也行，重點是控制換行），當picker-view展示的時候展示rich-text，隱藏textarea；當picker-view隱藏的時候展示textarea，隱藏rich-text；
wxml:

<view class="require_group_fr">
    <view class='rich_txt_box' style="{{('height:' + txtHeight + 'px')}};" 
    wx:if="{{isPickerShow}}" >
      <rich-text wx:if="{{txtDescribe!==''}}" nodes="{{txtDescribe}}"></rich-text>
      <rich-text wx:else nodes="{{describePlaceholder}}" style="color:#868686;font-size:28rpx;line-height:1.2;"></rich-text>
    </view>
    <textarea wx:if="{{!isPickerShow}}" class="" value="{{describe}}" maxlength="300" auto-height="{{true}}" placeholder="{{describePlaceholder}}" placeholder-style="color:#868686;font-size:28rpx;" bindinput="describe" bindlinechange="textAreaLineChange"></textarea>
</view>

js:

data:{
	txtDescribe:'',
    txtHeight: 0,
    describePlaceholder:'詳細描述你的需求，寫得越詳細，被接單機率越高',
},
pickerShow: function() {
//當picker-view展示的時候，顯示rich-text，隱藏textarea
   this.setData({
     isPickerShow: true,
     txtDescribe:this.data.describe
   });
},
textAreaLineChange(e) {
  //根據textarea的高度設置rich-text的高度
  this.setData({ 
    txtHeight: e.detail.height 
  })
},

wxss:

.rich_txt_box{
  min-height: 150rpx;
  padding: 0 10rpx;
  line-height: 1.6;
}
.rich_txt_box rich-text{
  word-break:break-all;//重要，控制換行展示
}
textarea{
  min-height: 150rpx;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10rpx;
  border: none;
  line-height: 1.6;
}

體驗版展示效果如下：


當然，網上也有很多其它的解決辦法，這個全憑個人愛好。