微信小程序textarea层级过高覆盖其他组件的解决方法，亲测优化有效(taro,微信小程序原代码类似)

今天在做微信小程序一个页面多个textarea输入框时，出现了textarea层级过高覆盖其他组件的问题，在网上搜了很多资料，按照某一个解决方案思路去尝试，但是还是遇到了部分问题，最终优化解决了这些问题，运行效果图如下：

具体代码如下：

app.styl:

.hide{
 display: none !important;
}

.show{
 display: block !important;
}

// @textare
.textarea_content {
  width:100%;
  height: 192rpx;
  padding: 18rpx;
  font-size:32rpx;
  line-height:1.5;
  border-radius:8rpx;
  background-color:#FFF;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  border-top:1PX #d6e4ef solid;
  border-bottom:1PX #d6e4ef solid;
  border-right:1PX #d6e4ef solid;
  border-left:1PX #d6e4ef solid;
}
/*隐藏滚动条*/
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
.textarea_text {
  word-break: keep-all;
  word-wrap: break-word;
  width:100%;
  font-size:32rpx;
  line-height:1;
  outline:none;
  resize:none;
  -webkit-appearance:none;
  border-radius:0;
  padding:0;
  margin:0;
  border:0;
}
.textarea_placeholder{
  font-size:32rpx;
  color: #CCCCCC;
}

maintenanceAdd.tsx:

import Taro, { Component, Config } from '@tarojs/taro'
import { View, Text, ScrollView } from '@tarojs/components'
export default class maintenanceAdd extends Component {

    /**
     * 指定config的类型声明为: Taro.Config
     *
     * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
     * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
     * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
     */
    config: Config = {
        navigationBarTitleText: '填写维修报告'
    }

    constructor() {
        super(...arguments)
        this.state = {
            repairDesc: "",
            problemDesc: "",
            // @textare
            textAreaObj: [{
              isContentFocus: true,
              isInputContentFocus: false,
              isFocus: false
            },{
              isContentFocus: true,
              isInputContentFocus: false,
              isFocus: false
            }]
        }
    }

   ......

    repairDescHandleText(e) {
        const value = e.detail.value
        this.setState({
            repairDesc: value
        })
    }

    problemDescHandleText(e) {
        const value = e.detail.value
        this.setState({
            problemDesc: value
        })
    }
  ......

  // @textare处理事件
  bindTextareaHandle(index, type){
    if(type=='blur'){
      this.state.textAreaObj[index] = {
        isFocus: false, //触发焦点
        isContentFocus: true, //聚焦时隐藏内容文本标签
        isInputContentFocus: false
      };
    }else if(type=='focus'){
      this.state.textAreaObj[index] = {
        isFocus: true, //触发焦点
        isContentFocus: false, //聚焦时隐藏内容文本标签
        isInputContentFocus: true
      };
    }
    this.setState({
      textAreaObj: this.state.textAreaObj
    });
  }

    render() {
        const {
            repairDesc,
            problemDesc,
            // @textare
            textAreaObj
        } = this.state;
        const textAreaObj0 = textAreaObj[0], textAreaObj1 = textAreaObj[1];
        return (
            
                
                

                      ......

                      维修描述
                      
                        
                      
                      
                        
                          {repairDesc
                            ? {repairDesc}
                            : 请输入}
                        
                      

                       ......

                      问题描述
                      
                        
                      
                      
                        
                          {problemDesc
                            ? {problemDesc}
                            : 请输入}
                        
                      
                    

                    ......

                    
                        提交维修报告
                    
                
            
        )
    }
}