当设置swiper圆角时,会出现先直角后圆角
解决方式:
(1).需要在swiper外面的盒子设置 overflow: hidden;
(2).在swiper上设置
ovewflow:hidden;
border-radius:10rpx;
transform: translateY(0);
(3).给图片设置圆角
border-radius:10rpx;
<view class="swiper_content">
<swiper autoplay interval="2000" circular indicator-dots indicator-color="rgba(44,44,44,.3)" indicator-active-color="rgba(255,128,64,.9)" style='ovewflow:hidden;border-radius:10rpx;transform: translateY(0);'>
<swiper-item class="" item-id="">
<image class="" src="../../images/swiper/01.png"></image>
</swiper-item>
<swiper-item class="" item-id="">
<image class="" src="../../images/swiper/02.png"></image>
</swiper-item>
<swiper-item class="" item-id="">
<image class="" src="../../images/swiper/03.png"></image>
</swiper-item>
<swiper-item class="" item-id="">
<image class="" src="../../images/swiper/04.png"></image>
</swiper-item>
<swiper-item class="" item-id="">
<image class="" src="../../images/swiper/05.png"></image>
</swiper-item>
<swiper-item class="" item-id="">
<image class="" src="../../images/swiper/06.png"></image>
</swiper-item>
</swiper>
</view>
.swiper_content {
width: 710rpx;
height: 250rpx;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 20rpx;
border-radius: 10rpx !important;
border-radius: 30rpx;
overflow: hidden;
swiper {
width: 100% !important;
height: 250rpx !important;
border-radius: 10rpx !important;
}
swiper-item {
width: 100%;
border-radius: 10rpx !important;
position: relative;
}
image {
width: 100%;
height: 250rpx;
border-radius: 10rpx;
}
}