60 lines
987 B
Vue
60 lines
987 B
Vue
<template>
|
|
<view class="swiper_list">
|
|
<swiper class="swiper"
|
|
:autoplay="autoplay"
|
|
:current="currentIndex"
|
|
:interval="interval"
|
|
@change="SwiperChange">
|
|
<swiper-item v-for="(item,index) in list" :key="index">
|
|
<img :src="item.url" alt="">
|
|
</swiper-item>
|
|
|
|
</swiper>
|
|
<div class="numbers">{{ currentIndex + 1 }} / {{ list.length }}</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
autoplay: true,
|
|
interval: 3000,
|
|
currentIndex: 0
|
|
}
|
|
},
|
|
methods: {
|
|
SwiperChange(e) {
|
|
this.currentIndex = e.detail.current
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.swiper_list {
|
|
position: relative;
|
|
}
|
|
|
|
.numbers {
|
|
width: 50px;
|
|
height: 24px;
|
|
background-color: #000000;
|
|
border-radius: 12px;
|
|
opacity: 0.6;
|
|
color: #ffffff;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
line-height: 24px;
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 20px;
|
|
}
|
|
</style>
|