小程序开发项目中常使用到input、textarea等原生组件，实际情况如图所示，按钮定位在textarea框上的时候，文本框在开发者工具上显示正常，在真机查看的时候，其实是显示在按钮之上的，点击按钮的时候，其实会触发文本框从而获取焦点，试键盘弹起，导致按钮事件无效。这就是所说的原生组件层级高的问题
textarea_正常表现.png
textarea_异常.png
思考原因
这是为什么呢？ 官方文档有说明，因为textare、input这些是原生组件。原生组件的层级是最高的，不管其它非原生组件z-index设置多大，原生组件都无法覆盖在原生组件上。
解决办法
- 通过控制文本输入框显示隐藏，需要显示按钮的时候，将文本输入框，并用view样式代替文本框。
- 运用<cover-view> 覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button。
// 给button用cover-view标签包裹
<cover-view class='footer' style="z-index: 10000;">
<button bindtap='submit' class="btn-common btn-large {{isSubmit?'btn-disable':'btn-primary'}}" style="background-color: #FFA00B; box-shadow:#f90 0px 8px 20px 0px" disabled="{{isSubmit}}" loading="{{isSubmit}}" hover-class="{{isSubmit ? '' : 'scrm-button-hover-primary'}}" wx:if="{{info.status == 1}}">{{isSubmit?'核销中...':'确认核销'}}</button>
</cover-view>
小程序文档 cover-view 小程序也有说明：只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow: visible等。给按钮设置的阴影效果其实是不起作用的
最终手机上实现效果如下：
textarea_最终效果.png
网友评论