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