146 lines
2.9 KiB
Vue
146 lines
2.9 KiB
Vue
<template>
|
|
<view class="shape">
|
|
<swiper class="image-container example-body-item uni-swiper-wrapper" previous-margin="43rpx" next-margin="43rpx" circular @change="swiperChange" :indicator-dots="false" interval="2500" autoplay>
|
|
<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in imgList" :key="index">
|
|
<navigator class="carousel-link" :url="item.url" open-type="navigate" hover-class="none">
|
|
<image :class="currentIndex == index ? 'item-img' : 'item-img-side'" :src="imageSource(item, index)" lazy-load :draggable="false" :style="dontFirstAnimation ? 'animation: none;' : ''" mode="aspectFill" @error="imageError(item, index)"></image>
|
|
</navigator>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
imgList: {
|
|
type: Array,
|
|
default() {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
currentIndex: 0,
|
|
dontFirstAnimation: true,
|
|
failedImages: {},
|
|
}
|
|
},
|
|
watch: {
|
|
imgList() {
|
|
this.failedImages = {}
|
|
}
|
|
},
|
|
methods: {
|
|
imageSource(item, index) {
|
|
if (this.failedImages[index] && item.fallbackImage) {
|
|
return item.fallbackImage
|
|
}
|
|
return item.image
|
|
},
|
|
imageError(item, index) {
|
|
if (!this.failedImages[index] && item.fallbackImage && item.fallbackImage !== item.image) {
|
|
this.$set(this.failedImages, index, true)
|
|
}
|
|
},
|
|
swiperChange(e) {
|
|
this.dontFirstAnimation = false
|
|
this.currentIndex = e.detail.current
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less">
|
|
|
|
.example-body-item {
|
|
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 60rpx;
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
.uni-swiper-wrapper {
|
|
|
|
// /deep/ 深度选择器,使用后才可选 uni-swiper-dots 和 uni-swiper-dot
|
|
|
|
/deep/ .uni-swiper-dots {
|
|
top: 310rpx;
|
|
}
|
|
|
|
/deep/ .uni-swiper-dot {
|
|
width: 25upx !important;
|
|
height: 9upx !important;
|
|
border-radius: 4rpx;
|
|
background: #C0C0C0 !important;
|
|
}
|
|
|
|
/deep/ .uni-swiper-dot-active {
|
|
width: 40upx !important;
|
|
height: 8upx !important;
|
|
background: #42E2CD !important;
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
|
|
.image-container {
|
|
height: 360rpx;
|
|
}
|
|
.carousel-link {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.item-img {
|
|
width: 650rpx;
|
|
height: 360rpx;
|
|
border-radius: 14rpx;
|
|
animation: to-big .3s;
|
|
}
|
|
|
|
.swiper-item {
|
|
width: 650rpx;
|
|
height: 360rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.item-img-side {
|
|
width: 650rpx;
|
|
height: 320rpx;
|
|
border-radius: 14rpx;
|
|
animation: to-mini .5s;
|
|
}
|
|
|
|
.swiper-item-side {
|
|
width: 650rpx;
|
|
height: 320rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
@keyframes to-mini
|
|
{
|
|
from {
|
|
height: 360rpx;
|
|
}
|
|
to {
|
|
height: 320rpx;
|
|
}
|
|
}
|
|
@keyframes to-big
|
|
{
|
|
from {
|
|
height: 320rpx;
|
|
}
|
|
to {
|
|
height: 360rpx;
|
|
}
|
|
}
|
|
</style>
|