- 父组件
<view class="swiper">
<club-swiper></club-swiper>
</view>
css
.swiper {
border-radius: 20rpx;
height: 350rpx;
}
- 子组件
<view>
<swiper class="swiper-content">
<swiper-item>
<view class="swiper-item">
<img src="@/static/images/club/swiper.png" alt="" />
</view>
</swiper-item>
</swiper>
</view>
css
.swiper-content {
width: 100%;
height: 350rpx;
.swiper-item {
img {
width: 100%;
height: 350rpx;
}
}
}
效果
没有圆角
解决:
父组件添加overflow:hidden