收藏
回答

[BUG]scroll-view内嵌套fixed图层,渲染不完全

问题模块 框架类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 scroll-view 微信iOS客户端 iOS 6.5.21 1.9.5

scroll-view组件中如果嵌套一个fixed定位的view,在真机IOS下,能够看到fixed的图层被遮挡住了,但是,遮挡住的部分却仍然可以交互(比如例子里的按钮遮挡的部分仍然可以点击)。明显是渲染不完全,我觉得开发工具的渲染逻辑是正确的,应该保证fixed图层完整。


scroll-view内嵌套fixed图层的场景,在多个自定义组件的嵌套使用时会经常需要,希望尽快修复~~~







WXML:

<view class="fiexd-layer">
  <view class="bg-mask"></view>

  < scroll-y class="scroll-body">

    <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;
}


邀请回答
复制链接收藏投诉关注问题回答

3 个回答

  • Fantasy
    Fantasy
    2018-03-07

    解决了吗

    2018-03-07
    赞同
    回复
  • 五更
    五更
    2018-05-16

    也遇到这个问题,后来解决方法是将要fixed定位的元素放到和scroll-view组件同层级就好了,包裹多一个view就好了。

    2018-05-16
    赞同
    回复
  • 🇻 🇰 🇮 🇳 🇬ʷᵃⁿᵍ
    🇻 🇰 🇮 🇳 🇬ʷᵃⁿᵍ
    2018-09-11

    如果用了组件的需要将父组件 z-index 调高;


    我在 scroll-view 中使用了组件,组件的弹出层一直被其它 z-index 没它高的层挡住(只有 ios 会被挡住) ,我尝试将 scroll-view  style 增加  position: fixed;z-index:9999  ,scroll-view 中的组件弹层终于到了最高层


    2018-09-11
    赞同
    回复