今天在给轮播图添加圆角的时候,发现在安卓机上是有圆角的,但是在苹果手机上圆角却失效了,后来翻阅了文档发现这是个bug。
下面是两种解决方案:
第一种:-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
<view class="swiper-container">
<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2000" :duration="500"
:circular="true">
<swiper-item v-for="(item,index) in banners" :key="item.id">
<view class="swiper-item">
<image :src="item.picUrl" mode="aspectFill" class="imgs" style="border-radius: 40rpx;"></image>
</view>
</swiper-item>
</swiper>
</view>
//轮播图区
.swiper-container {
margin-top: 26rpx;
position:relative;
.swiper {
@include radius(40rpx);
background: #FFF;
box-shadow:$shadow;
overflow: hidden;
height: 468rpx;
width: 670rpx;
margin: auto;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);//在圆角元素上加上这个样式
.swiper-item {
width: 100%;
height: 100%;
@include radius(40rpx);
.imgs {
width: 100%;
height: 100%;
@include radius(40rpx);
}
}
}
}
第二种:border-radius: 20rpx;
transform:translateY(0);
<view class="swiper-container">
<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2000" :duration="500"
:circular="true">
<swiper-item v-for="(item,index) in banners" :key="item.id">
<view class="swiper-item">
<image :src="item.picUrl" mode="aspectFill" class="imgs" style="border-radius: 40rpx;"></image>
</view>
</swiper-item>
</swiper>
</view>
//轮播图区
.swiper-container {
margin-top: 26rpx;
position:relative;
.swiper {
@include radius(40rpx);
transform: translateY(0);
background: #FFF;
box-shadow:$shadow;
overflow: hidden;
height: 468rpx;
width: 670rpx;
margin: auto;
.swiper-item {
width: 100%;
height: 100%;
@include radius(40rpx);
transform: translateY(0);
.imgs {
width: 100%;
height: 100%;
@include radius(40rpx);
transform: translateY(0);
}
}
}
}
以上是小编对微信小程序设置swiper圆角在ios上失效解决方法,有些方法是查询的,如文中有错误的,欢迎大佬留言指正…
还有就是等待官方解决方案…