You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

67 lines
1.3 KiB

3 years ago
<template>
<swiper class="swiper-block" autoplay="true" circular="true" previous-margin="90rpx" next-margin="90rpx" current="0" @change="swiperChange">
<block v-for="(item, index) in imgs" :key="index">
<swiper-item class="swiper-item" :class="(swiperIndex == index ? 'active' : '')" @tap="previewImg">
<image mode="aspectFill" :src="item" :class="'slide-image ' + (swiperIndex == index ? 'active' : '')"></image>
</swiper-item>
</block>
</swiper>
</template>
<script>
export default{
props: {
imgs: {
type: Array,
default: []
}
},
data(){
return {
swiperIndex: 0
}
},
methods: {
swiperChange(e) {
const that = this;
that.setData({
swiperIndex: e.detail.current
});
},
previewImg() {
uni.previewImage({
urls: this.imgs
});
}
}
}
</script>
<style lang="less">
.swiper-block {
height: 300rpx;
width: 100%;
}
.swiper-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow: unset;
}
.slide-image {
height: 250rpx;
width: 520rpx;
border-radius: 9rpx;
margin: 0rpx 30rpx;
z-index: 1;
}
.active {
transform: scale(1.14);
transition: all 0.2s ease-in 0s;
z-index: 20;
}
</style>