微信小程序中的input显示在遮罩层外

原因

出现的原因就是因为原生的组件优先级最高，你自己写的不管你加z-index设置成多大都不会覆盖掉

解决办法

简单点就是遮罩层的view改成cover-view，同时将遮罩层的z-index设置一个大于0的数（如果input也设置了z-index就另当别论，反正大于input的z-index就对了）

<!-- 遮罩层 -->
<cover-view class="shadow_box">
 .....
</cover-view>

css

.shadow_box{
  ...
  z-index: 9;
}

这里还有个问题，如果你用了这个方法，可能会报这个错误

闲谈

下拉刷新的问题

顺便说一句，这种问题出现的场景一般都是出现在手动弹窗的场景，这个时候又会出现另一个问题就是遮罩层不管设置成什么你下啦刷新都会到里面这个页面

为了让遮罩层下拉刷新不对里面的页面起作用，直接加上catchtouchmove='true'就行，这个在模拟器上是没有用的，放真机上就有用

<!-- 遮罩层 -->
<cover-view class="shadow_box" catchtouchmove='true' >
 .....
</cover-view>