收藏
回答

skyline模式下,父容器为scroll-view组件,子元素绝对定位层级问题?

在skyline模式下,有一块内容需要横向滚动,隐藏使用了scroll-view作为父组件。 里面有一个image元素,使用了position:absolute; 定位,top: -20rpx; 发现在开发工具上面是正常显示,在ios手机上缺被裁掉了,看上去就好像层级不够,被压住了一样。

手机效果如下:

部分代码如下:

<scroll-view class="carScroll" scroll-x enable-flex style="flex-direction: row;overflow: visible;" type="list" clip="{{false}}">
    <view class="image-wrap">
            <image src="xxx" class="image-veh" mode="aspectFit" />
            <image class="image-icon-rank" mode="widthFix" src="{{itemName.rankIconUrl}}" />
    </view>
</scroll-view>


.carScroll .carItem .image-wrap .image-icon-rank {
  position: absolute;
  top: -20rpx;
  right: -10rpx;
  width: 50rpx;
  height: 50rpx;
  z-index: 9999;
}
回答关注问题邀请回答
收藏

1 个回答

  • 河畔一角
    河畔一角
    05-15

    换个思路解决了,问题就是超出scroll-view容器外的元素会被裁掉,虽然官方写了clip属性,在开发工具上面是有效的,真机上不起作用。 不要用padding来设置上下填充,要给子元素设置margin-top来扩大子元素高度,这样定位就能起作用了。

    05-15
    有用
    回复
登录 后发表内容