88 lines
1.4 KiB
Vue
88 lines
1.4 KiB
Vue
|
<script setup>
|
||
|
|
import { ref } from "vue";
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
interval: {
|
||
|
|
type: Number,
|
||
|
|
default: 3000,
|
||
|
|
},
|
||
|
|
autoplay: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
data: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [],
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const currentIndex = ref(0);
|
||
|
|
|
||
|
|
const handleChange = (e) => {
|
||
|
|
currentIndex.value = e.detail.current;
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<view>
|
||
|
|
<swiper
|
||
|
|
class="swiper-container"
|
||
|
|
v-if="data.length > 0"
|
||
|
|
:current="currentIndex"
|
||
|
|
@change="handleChange"
|
||
|
|
:autoplay="autoplay"
|
||
|
|
:interval="interval"
|
||
|
|
>
|
||
|
|
<swiper-item v-for="(imgSrc, index) in data" :key="index">
|
||
|
|
<image :src="imgSrc" mode="widthFix" />
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
<view class="dots">
|
||
|
|
<view
|
||
|
|
v-for="index in data.length"
|
||
|
|
:key="index"
|
||
|
|
class="dot"
|
||
|
|
:class="{ active: currentIndex === index - 1 }"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.swiper-container {
|
||
|
|
width: calc(100% - 20px);
|
||
|
|
margin: 10px;
|
||
|
|
height: 440px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper-container > swiper {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.swiper-container image {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dots {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 27%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
display: flex;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dot {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: rgba(255, 255, 255, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dot.active {
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
</style>
|