在小程序开发中我遇到要把小程序中的swiper中的图片做出圆角的效果看着好看点,可是直接加属性根本不行。后来在网上查了很多资料才改好,今天发出来给兄弟们看一下(我是后端不太懂前端勿喷),废话不多直接上代码直接拿走不用客气
xml代码:
<swiper class="swiper-box" indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{top_data}}" wx:key="index" wx:for-item="top">
<swiper-item class="swiper-item">
<image class="swiper-img" src="{{top.img}}"></image>
</swiper-item>
</block>
</swiper>
css代码:
/* 这是主页轮播图样式 */
.swiper-box {
margin: 30rpx;
border-radius: 18rpx;
overflow: hidden;
/* 兼容IOS,否则在swiper组件内的布局都不受border-radius和overflow的约束 */
transform: translateY(0);
}
.swiper-item {
width: calc(100vw - 60rpx);
height: calc(50vw - 30rpx);
}
.swiper-img {
width: 100%;
height: 100%;
}