uniapp,小程序 input穿透问题

文章目录


使用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内容不会穿透显示,而且不会遮挡弹窗

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值