圆角轮播图ios兼容问题
发布于 6 年前 作者 yinchao 8874 次浏览 来自 问答

将轮播图样式改为圆角。在安卓系统里运行,没有一点问题,但是在ios系统中运行时,图片静止时,轮播图为圆角,但是当触摸滑动时候,外边框就变成了直角。css中关于border-radius都做了兼容性写法。这样的情况如何解决。

html:

<view class=‘body’>

<!–顶部轮播图  -->

<swiper class=“moveBox” indicator-dots="{{indicatorDots}}" id=“custom_swiper”

autoplay="{{autoplay}}" interval="{{interval}}" indicator-color=“rgb(255,255,255)” indicator-active-color=“rgb(255, 0,0)” duration="{{duration}}" circular="{{circular}}" bindchange=“swiperchange”>

<block wx:for="{{imgUrls}}" wx:key=“images”>

<navigator  url="…/detial/detial" hover-class=“navigator-hover”>

<swiper-item class=“moveBox”>

<image src="{{item}}" class=“slide-image topimage” mode=“scaleToFill”/>

</swiper-item>

</navigator>

</block>

</swiper>

</view>

css

/*顶部轮播图样式  */

.body{

padding: 0 5%;

}

#custom_swiper{

-moz-border-radius: 30rpx !important;

-webkit-border-radius: 30rpx !important;

border-radius: 30rpx !important;

overflow: hidden;

height: 600rpx;

}

.topimage{

width: 100%;

height: 100%;

-moz-border-radius: 30rpx !important;

-webkit-border-radius: 30rpx !important;

border-radius: 30rpx !important;

}

.moveBox{

-moz-border-radius: 30rpx !important;

-webkit-border-radius: 30rpx !important;

border-radius: 30rpx !important;

}

__
__

4 回复

轮播图滑动时,图片会出现这个情况。图片如果仅仅静态的展示,可以加个父级让它显示的为圆角。

在swiper上加overflow:hidden 和transform: translateY(0);,亲测有效

你好。这是 iOS 系统的已知限制,目前暂时无法解决。

这个问题是否指都是:iOS手机上image组件使用radius实现圆角都会有限制。

我都应用,在显示圆角/圆形时,iOS会有明显都正方形黑色闪动。

回到顶部