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: 300rpx; 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: 100vh; bottom: 0; background-color: #e7e7e7; padding: 0 0 0 10rpx; 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就好了。
解决了吗