[移动开发]微信小程序input、textarea层级过高的穿透问题如何解决

微信小程序原生组件camera、canvas、input（仅在focus时表现为原生组件）、live-player、live、pusher、map、textarea、video的层级是最高的，页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上，所以会出现穿透现象。比如，有一个列表弹窗，弹窗下面挡着一个input，当点击列表某一项时，如果这一项刚好跟下面的input输入框重合，则会出现下面input获取焦点显示的情况，这个就是穿透现象。

解决办法如下：

1、使用if，当触发选择列表时隐藏input或textare组件，选择完成点击确认关闭选择列表，显示input或textare。
??2、选择列表自定义组件使用 cover-view 和 cover-image 组件代替view和image，cover-view 和 cover-image 组件，可以覆盖在部分原生组件上面。（使用cover-view时，必须整体都用cover-view）
?

<cover-view class="cover-view" style="{{height}}" wx:if="{{isShowModel}}">
    <cover-view class="selectModel">
      <cover-view class="model" @tap="onShowOrHideModel()"></cover-view>
      <cover-view class="modelBox">
        <cover-view class="title">{{title}}</cover-view>
        <cover-view class="list">
          <block wx:for="{{namesList}}" wx:key="{{index}}">
            <cover-view class="li" @tap="onClick({{item.code}})">
              <cover-image wx:if="{item.code}}" class="icon" src="/image/selected.png"></cover-image>
              <cover-image wx:else class="icon" src="/image/unSelect.png" ></cover-image>
              <cover-view class="name">{{item.name}}</cover-view>
            </cover-view>
          </block>
        </cover-view>
        <cover-view class="button" @tap="onSubmit">确认</cover-view>
      </cover-view>
    </cover-view>
  </cover-view>