今天在做微信小程序一个页面多个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 (
            <View className='page90 bk-F3 pd24 mt128'>
                <Cnavbar title='填写维修报告' left={true}></Cnavbar>
                <View className='p_view bk'>

                      ......

                      <View className='resultFont'>维修描述</View>
                      <View className={textAreaObj0.isInputContentFocus ? 'show':'hide'}>
                        <AtTextarea
                          name='repairDesc'
                          value={repairDesc}
                          focus={textAreaObj0.isFocus}
                          onChange={this.repairDescHandleText.bind(this)}
                          onBlur={this.bindTextareaHandle.bind(this,0,'blur')}
                          maxlength='180'
                          placeholder='请输入'
                        />
                      </View>
                      <View className={textAreaObj0.isContentFocus ? 'show':'hide'} onClick={this.bindTextareaHandle.bind(this,0,'focus')}>
                        <ScrollView
                          scrollY={true}
                          className="textarea_content"
                        >
                          {repairDesc
                            ? <Text className="textarea_text" space="nbsp">{repairDesc}</Text>
                            : <View className="textarea_placeholder">请输入</View>}
                        </ScrollView>
                      </View>

                       ......

                      <View className='resultFont'>问题描述</View>
                      <View className={textAreaObj1.isInputContentFocus ? 'show':'hide'}>
                        <AtTextarea
                          name='problemDesc'
                          value={problemDesc}
                          focus={textAreaObj1.isFocus}
                          onChange={this.problemDescHandleText.bind(this)}
                          onBlur={this.bindTextareaHandle.bind(this,1,'blur')}
                          maxlength='180'
                          placeholder='请输入'
                        />
                      </View>
                      <View className={textAreaObj1.isContentFocus ? 'show':'hide'} onClick={this.bindTextareaHandle.bind(this,1,'focus')}>
                        <ScrollView
                          scrollY={true}
                          className="textarea_content"
                        >
                          {problemDesc
                            ? <Text className="textarea_text" space="nbsp">{problemDesc}</Text>
                            : <View className="textarea_placeholder">请输入</View>}
                        </ScrollView>
                      </View>
                    </View>

                    ......

                    <View className='mt26'>
                        <AtButton className='btn1' onClick={this.saveHandler}><View className='white-Font'>提交维修报告</View></AtButton>
                    </View>
                </View>
            </View>
        )
    }
}