textarea层级过高的解决办法

方法一：微信开发者文档中使用了<cover-view>元素遮住textarea

方法二：封装一个textarea(原理通过view标签来代替不点击输入时的状态）

wxml

<view class="wrap wrap-class">
  <view 
    class="placeholder placeholder-class" 
    style="{{placeholder-style}}" hidden="{{value}}"
  >{{placeholder}}</view>
  <textarea 
    wx:if="{{showTextArea}}"
    class="textarea textarea-class"
    value="{{value}}" 
    disabled="{{disabled}}"
    maxlength="{{maxlength}}" 
    auto-focus="{{autoFocus}}" 
    disable-default-padding="true"
    focus="{{focus}}" 
    fixed="{{fixed}}"
    auto-height="{{auto-height}}" 
    bindinput="handleInput" 
    bindfocus="handleFocus" 
    bindblur="handleBlur" 
    bindconfirm="{{handleConfirm}}"
    bindkeyboardheightchange="bindkeyboardheightchange"
    style="{{textarea-style}}"
    maxlength="50"
  /> 
  <view wx:else 
    class="content textarea-class" 
    bindtap="handleTap"
    style="{{virtual-textarea-style}}"
  >
    {{value}}
  </view>
</view>

　　css

.wrap {
  position: relative;
  z-index: 1;
}
.placeholder {
  position:absolute;
  top: 0;
  left: 0;
  z-index: -1;
  color: #bebebe;
 
}
.textarea, .content {
  display: block;
  padding: 0;
  width: 530rpx;
  height: 90rpx;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  /* background-color: red; */
}
.content{
  flex-wrap: wrap;
  white-space:normal;
  word-break:break-all;
  word-wrap:break-word;
  width: 530rpx;
  height: 90rpx;
}

　　js

// components/multiInput/index.js
Component({
  /**
   * 组件的属性列表
   */
  externalClasses: ['textarea-class', 'wrap-class', 'placeholder-class'],
  properties: {
    value: String, 
    disabled: Boolean,
    maxlength: {
      type: Number,
      value: -1
    },
    "auto-focus": Boolean,
    focus: Boolean,
    "auto-height": Boolean,
    fixed: Boolean,
    "placeholder-style": String,
    "textarea-style": String,
    "virtual-textarea-style": String,
    placeholder: String,
    "cursor-spacing": {
      type: Number,
      value: 0
    },
    cursor: {
      type: Number,
      value: -1
    },
    "show-confirm-bar": {
      type: Boolean, 
      value: true
    },
    "show-confirm-bar": {
      type: Number,
      value: -1
    },
    "selection-end": {
      type: Number,
      value: -1
    },
    "adjust-position": {
      type: Boolean,
      value: true
    },
    "hold-keyboard": Boolean,

  },

  /**
   * 组件的初始数据
   */
  data: {
    showTextArea: false,
    autoFocus: false
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleInput(e) {
      this.setData({
        value: e.detail.value
      })
      this.triggerEvent("input", e.detail)
    },
    handleTap() {
      this.setData({
        showTextArea: true,
        autoFocus: true
      })
    },
    handleBlur(e) {
      this.setData({
        showTextArea: false
      })
      this.triggerEvent("blur", e.detail)
    },
    handleFocus(e) {
      this.triggerEvent("focus", e.detail)
    },
    bindkeyboardheightchange(e) {
      this.triggerEvent("bindkeyboardheightchange", e.detail)
    }
  }
})

　　json

{
  "component": true,
  "usingComponents": {}
}

　　对应的页面引入就完事了

{
    "navigationBarTitleText": "确认订单",
    "usingComponents": {
        "multiline": "/components/textarea/index"
    }
}