shoot-miniprograms/src/components/Swiper.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>