scroll-view组件中如果嵌套一个fixed定位的view,在真机IOS下,能够看到fixed的图层被遮挡住了,但是,遮挡住的部分却仍然可以交互(比如例子里的按钮遮挡的部分仍然可以点击)。明显是渲染不完全,我觉得开发工具的渲染逻辑是正确的,应该保证fixed图层完整。
scroll-view内嵌套fixed图层的场景,在多个自定义组件的嵌套使用时会经常需要,希望尽快修复~~~
WXML:
< view class = "fiexd-layer" > < view class = "bg-mask" ></ view >
< view class = "fixed-layer" > 在iphone真机下: 这是一个fixed层,宽度100%,视觉上感觉是被父节点遮挡住了,但是遮挡的部分仍然可以进行交互,点击下面的按钮看看 < button class = "my-button" type = "primary" bindtap = "onFixedLayerButton_Tap" >被遮挡的按钮</ button > </ view > </ scroll-view > </ view > |
WXSS:
.fixed-layer { position : fixed ; top : 0 ; right : 0 ; left : 0 ; z-index : 1 ; height : 300 rpx; width : 100% ; box-sizing: border-box; background-color : #f00 ; } .bg-mask { position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background-color : rgba( 0 , 0 , 0 , 0.66 ); } .scroll-body { position : absolute ; right : 0 ; top : 0 ; width : 60% ; height : 100 vh; bottom : 0 ; background-color : #e7e7e7 ; padding : 0 0 0 10 rpx; box-sizing: border-box; } |
如果用了组件的需要将父组件 z-index 调高;
我在 scroll-view 中使用了组件,组件的弹出层一直被其它 z-index 没它高的层挡住(只有 ios 会被挡住) ,我尝试将 scroll-view style 增加 position: fixed;z-index:9999 ,scroll-view 中的组件弹层终于到了最高层
也遇到这个问题,后来解决方法是将要fixed定位的元素放到和scroll-view组件同层级就好了,包裹多一个view就好了。
解决了吗