uniapp，小程序 input穿透问题

文章目录

根据官方文档的意思，应该是我们通过uni生成的小程序或者app，原生组件的层级是高于前端组件的层级的

而使用cover-view的话，层级比原生组件的层级更高

层次从高到低是：cover-view，原生，前端组件

直接使用cover-view，运行在微信小程序上，看到input内容依然是穿透显示的，需要设置cover-view的z-index来设置层级，我自己的程序设置了100

如下：

<cover-view class="back-blue">
	<button class="conver-button" @click="confirm()">确认</button>
</cover-view>

页面是比较长的表单页面，确认按钮使用position:fixed一直在底部显示

未使用cover-view的时候，滑动页面，input内容会穿透确认按钮显示

使用cover-view未设置层级的时候也是会穿透显示，设置了100

通过再次尝试，cover-view可以不设置z-index

但是，如果页面使用了uni-popup的底部弹窗，那么cover-view会遮挡弹窗

最后我的解决方式是，不适用cover-view，直接使用button，style多一条z-index=10

这样设置input内容不会穿透显示，而且不会遮挡弹窗