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

体验版展示效果如下：


当然，网上也有很多其它的解决办法，这个全凭个人爱好。