swiper轮播图圆角滑动会变成直角然后再变回圆角
解决:在swiper的父盒子上加overflow:hidden和transform:translateY(0);
html
<div class="my-swipe-box">
<van-swipe :autoplay="3000" class="my-swipe">
<van-swipe-item v-for="(image, index) in images" :key="index">
<router-link to="/">
<img v-lazy="image" width="100%" height="100%"/>
</router-link>
</van-swipe-item>
</van-swipe>
</div>
js
export default {
data(){
return {
images:[
' https://img01.yzcdn.cn/vant/apple-1.jpg',
'https://img01.yzcdn.cn/vant/apple-2.jpg',
]
}
}
}
css
.my-swipe-box{
width:90%;
height:180px;
margin:0 auto;
border-radius:10px;
//解决swiper轮播图圆角滑动会变成直角然后再变回圆角问题
overflow :hidden;
transform :translateY(0);
.my-swipe{
.van-swipe-item a{
width:100%;
height:180px;
display :inline-block;
}
}
}