Solution to the problem of too high penetration of input and textarea levels in WeChat applet

The WeChat mini-program native components camera, canvas, input (only behaves as a native component when focused), live-player, live, pusher, map, textarea, and video have the highest hierarchy. No matter how much the z-index of other components on the page is set, they cannot cover the native components.

From the effect in the figure, we can see that the input content penetrates into the selection list custom component. The solution is:
1. Use if to hide the input or textare component when the selection list is triggered. When the selection is completed, click Confirm to close the selection list and display the input or textare.
2. Select the custom components in the list and use cover-view and cover-image components instead of view and image. The cover-view and cover-image components can be covered on some native components.

<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}}(multiple selections possible)</cover-view>
        <cover-view class="list">
          <block wx:for="{{waitClassifyNamesList}}" wx:key="{{index}}">
            <cover-view class="li" @tap="onClickSelect({{item.optionCode}})">
              <cover-image wx:if="{{filter.isInclude(item.optionCode,classifyIds)}}" class="icon" src="/image/signatory/selected.png"></cover-image>
              <cover-image class="icon" src="/image/signatory/unSelect.png" wx:else></cover-image>
              <cover-view class="name">{{item.optionName}}</cover-view>
            </cover-view>
          </block>
        </cover-view>
        <cover-view class="btn" @tap="onSubmitSelectService">Confirm</cover-view>
      </cover-view>
    </cover-view>
  </cover-view>

The implementation effects of the two methods are shown in the figure above. As for which method to choose, choose according to actual needs.

This is the end of this article about how to solve the problem of excessive penetration of WeChat mini-program input and textarea levels. For more relevant mini-program input and textarea penetration content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!