96 lines
1.6 KiB
Vue
96 lines
1.6 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: () => [],
|
|
},
|
|
onChange: {
|
|
type: Function,
|
|
default: (index) => {},
|
|
},
|
|
});
|
|
|
|
const currentIndex = ref(0);
|
|
|
|
const handleChange = (e) => {
|
|
currentIndex.value = e.detail.current;
|
|
props.onChange(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: 100%;
|
|
height: 570px;
|
|
position: relative;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.swiper-container > swiper {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.swiper-container image {
|
|
width: calc(100% - 20px);
|
|
margin: 0 10px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.dots {
|
|
position: absolute;
|
|
bottom: 15%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.dot.active {
|
|
background-color: #000;
|
|
}
|
|
</style>
|