94 lines
1.7 KiB
Vue
94 lines
1.7 KiB
Vue
<template>
|
|
<swiper class="image-container" previous-margin="45rpx" next-margin="45rpx" circular autoplay @change="swiperChange">
|
|
<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in imgList" :key="item[urlKey]">
|
|
<image @click="clickImg(item)" :class="currentIndex == index ? 'item-img' : 'item-img-side'" :src="item[urlKey]" lazy-load :style="dontFirstAnimation ? 'animation: none;' : ''" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
imgList: {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
}
|
|
},
|
|
urlKey: {
|
|
type: String,
|
|
default() {
|
|
return ''
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
currentIndex: 0,
|
|
dontFirstAnimation: true
|
|
}
|
|
},
|
|
methods: {
|
|
swiperChange(e) {
|
|
this.dontFirstAnimation = false
|
|
this.currentIndex = e.detail.current
|
|
},
|
|
clickImg(item) {
|
|
this.$emit('selected', item, this.currentIndex)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.image-container {
|
|
width: 750rpx;
|
|
height: 450rpx;
|
|
}
|
|
|
|
.item-img {
|
|
width: 630rpx;
|
|
height: 400rpx;
|
|
border-radius: 14rpx;
|
|
animation: to-big .3s;
|
|
}
|
|
|
|
.swiper-item {
|
|
width: 630rpx;
|
|
height: 400rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.item-img-side {
|
|
width: 630rpx;
|
|
height: 360rpx;
|
|
border-radius: 14rpx;
|
|
animation: to-mini .3s;
|
|
}
|
|
|
|
.swiper-item-side {
|
|
width: 630rpx;
|
|
height: 360rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
@keyframes to-mini
|
|
{
|
|
from {
|
|
height: 400rpx;
|
|
}
|
|
to {
|
|
height: 360rpx;
|
|
}
|
|
}
|
|
@keyframes to-big
|
|
{
|
|
from {
|
|
height: 360rpx;
|
|
}
|
|
to {
|
|
height: 400rpx;
|
|
}
|
|
}
|
|
</style>
|