55 lines
1.3 KiB
Vue
55 lines
1.3 KiB
Vue
<template>
|
|
<view class="content pr" v-if="list.length > 0">
|
|
<swiper class="swiper" indicator-color="#ffffff" indicator-active-color="#ff0000" :autoplay="autoplay"
|
|
:interval="interval" :duration="duration" @change="($event) => current = $event.detail.current + 1">
|
|
<swiper-item v-for="(item, index) in list" :key="index">
|
|
<image :src="item"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- 定位到图片的右下角 -->
|
|
<text class="text pa cfff fwn">{{ current }}/{{ total }}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
const props = defineProps({
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
});
|
|
const autoplay = ref(true); //自动播放
|
|
const interval = ref(3000);//3m切换
|
|
const duration = ref(500);//动画时常0.5m
|
|
|
|
//当前页
|
|
const current = ref(1);
|
|
//总页数
|
|
const total = ref(props.list.length);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
width: 100%;
|
|
height: 750rpx;
|
|
|
|
.swiper {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
z-index: 1;
|
|
bottom: 20rpx;
|
|
right: 20rpx;
|
|
color: #cccccc;
|
|
font-size: $uni-font-size-sm;
|
|
}
|
|
}
|
|
</style> |