uniapp,小程序 input穿透问题

文章目录


使用cover-view

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

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

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

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

如下:


	

页面是比较长的表单页面,确认按钮使用position:fixed一直在底部显示
未使用cover-view的时候,滑动页面,input内容会穿透确认按钮显示
使用cover-view未设置层级的时候也是会穿透显示,设置了100


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

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

最后我的解决方式是,不适用cover-view,直接使用button,style多一条z-index=10
这样设置input内容不会穿透显示,而且不会遮挡弹窗

你可能感兴趣的:(微信小程序开发记录,小程序,微信,vue.js)