实现上图所示的轮播图的效果
html:
<div class="swiper-scale-wrap">
<van-swipe class="swiper-block" :loop="true" :width="160" @change="onChange">
<van-swipe-item class="swiper-item" :class="{'active': index == activeIndex}" v-for="(item, index) in swiperList" :key="item.id">
<img :src="item.img" alt="">
</van-swipe-item>
</van-swipe>
</div>
JS：
export default {
data () {
return {
swiperList: [
{
id: '0',
title: '图一',
img: require('@/assets/img/bg_movement.png'),
},
{
id: '1',
title: '图二',
img: require('@/assets/img/bg_sugar.png')
},
{
id: '2',
title: '图三',
img: require('@/assets/img/bg_diet.png')
},
{
id: '3',
title: '图四',
img: require('@/assets/img/bg_blood.png')
}
]
activeIndex: 0
}
},
methods: {
onChange (index) {
this.activeIndex = index
}
}
}
CSS: --> 用的less
.swiper-scale-wrap{
padding: .4rem .15rem;
box-sizing: border-box;
height: 300px;
.swiper-block{
height: 200px;
.swiper-item{
display: flex;
justify-content: center;
align-items: center;
img{
120px;
height: 140px;
display: block;
}
}
.active{
transform: scale(1.4);
transition: all .2s ease-in 0s;
z-index: 20;
}
}
}