文章目录


使用cover-view

根据官方文档的意思,应该是我们通过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内容不会穿透显示,而且不会遮挡弹窗

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐