<view class="swiper">
<view class="swiper-box">
<swiper circular="true" @change="swiperChange" :autoplay="true" interval="5000" duration="500" previous-margin="25px" next-margin="25px">
<swiper-item v-for="(item, index) in swiperList" :key="index"><image :src="item.img" mode="aspectFill" :class="currentSwiper !== index ?'swiper-item-side':''" lazy-load="true" ></image></swiper-item>
</swiper>
<view class="indicator">
<view v-for="(item, index) in swiperList" :key="index" :class="currentSwiper >= index ? 'on' : 'dots'" :style="'width: ' + (currentSwiper >= index ? 100 / swiperList.length + '%' : '' )"></view>
</view>
</view>
</view>
<script>
export default {
data() {
return {
currentSwiper: 0,
swiperList: [{
img: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=339984553,3509384023&fm=26&gp=0.jpg'
}, {
img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1786439814,215205363&fm=26&gp=0.jpg'
}, {
img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600399666309&di=3670afbef52571b71b98f4562043498e&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F8%2F57ea3c2d57be6.jpg'
}],
}
},
methods:{
swiperChange(e) {
this.setData({
currentSwiper: e.detail.current,
});
}
}
}
</script>
.swiper {
width: 100%;
margin-top: 10upx;
display: flex;
justify-content: center;
}
.swiper-box {
width: 100%;
height: 45vw;
overflow: hidden;
position: relative;
z-index: 1;
}
.swiper-box swiper {
width: 100%;
height: 45vw;
}
.swiper-box swiper swiper-item{
display: flex;
align-items: center;
justify-content: center;
}
.swiper-box swiper swiper-item image {
width: 95%;
height: 45vw;
margin: 0 auto;
display: block;
border-radius: 10px;
transition: height .3s;
}
.swiper-item-side {
width: 95%;
height: 40vw!important;
transition: height .3s;
}
.indicator {
position: absolute;
bottom: 20upx;
left: 20upx;
background-color: rgba(255, 255, 255, 0.4);
width: 150upx;
height: 5upx;
border-radius: 3upx;
overflow: hidden;
display: flex;
}
.dots {
width: 0upx;
background-color: rgba(255, 255, 255, 1);
transition: all 0.3s ease-out;
}
.on {
width: 30%;
background-color: rgba(255, 255, 255, 1);
transition: all 0.3s ease-out;
}
