只用z-index就可以解决小程序input层级穿透了?

2,728 阅读2分钟
先抛出问题:如题,现在只用z-index就可以解决小程序input层级穿透了?还是我撞鬼了...反正下面是口水话

DDE701DF.gif

最近需要实现一个这样的页面:多个input框,在页面底部固定两个按钮

页面本身并不复杂,用position:fixed固定按钮就可以了,主要是小程序一直有部分原生组件层级穿透的问题,如下:

image.png

如果是弹窗遮挡,我们监听一下,弹窗弹起就把input隐藏掉就好。。。

所以我第一反应是像弹窗这种方案类似,监听页面滚动,当input滚动到页面底部就隐藏,可是有点麻烦呢 (我不会)

  • 在网上搜了一下,用cover-view包裹按钮区域

    完全没用

  • 再搜,cover-view样式要加z-Index:999

    开发工具上可行,一上真机就焉儿火,连按钮都不显示了

  • 了解一下cover-view:可覆盖的原生组件包括 mapvideocanvascameralive-playerlive-pusher

    只支持嵌套 cover-viewcover-image,可在 cover-view 中使用 button

    (我奇怪也没有说明可以覆盖input啊,先不管了,看到可在cover-view中使用button,难道是我用的TaroUI的Button的原因?)然后换成原生的button,样式改改改,开发工具和真机都可以诶

image.png DDD0F1CD.png

  • 看了一下控制台的样式,发现原生的button也是用cover-view,那按道理只用button也是可以的啊,试试试,马上底部容器改为View,并且去掉属性z-index:999———— image.png

    哦豁!!!被打回原型,还是被穿透了,原来只是被cover-view包裹的button才会默认生成一个新的cover-view

    • 把z-index:999加回来,又可以了。。。。 因为之前做的时候原生组件的层级穿透问题用z-index是无法解决的,我真的没往这边想,结果一步一步走。。。。惊奇的发现在底部容器上加个z-index就可以了!!!!!至今我还是无法相信啊

DDF3D91A.gif