<template>
<view class="content">
<view class="rotation">
<swiper :circular="true" :autoplay="false" duration="500" @change="topSwiperTab">
<swiper-item v-for="(item,index) in topSwiper" :key="index">
<image :src="item.src" mode="aspectFill" class="radius-df"></image>
</swiper-item>
</swiper>
<view class="dots">
<text>{{topSwiperIndex+1}}/{{topSwiper.length}}</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
topSwiperIndex: 0,
topSwiper: [{
src: '/static/data1.png'
},
{
src: '/static/bannar.png'
},
{
src: '/static/data2.png'
}
]
}
},
methods: {
topSwiperTab(e) {
var that = this;
this.topSwiperIndex = Number(e.target.current);
}
}
}
</script>
<style>
.dots{
color: #FFFFFF;
background-color: #333333;
opacity: 0.4;
z-index: 9;
border-radius: 50rpx;
width: 82rpx;
height: 39rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
position: absolute;
right: 44rpx;
top:694rpx
}
swiper{
width: 100%;
height: 750rpx;
}
.radius-df {
width: 100%;
height: 100%;
}
</style>
转载:https://www.cnblogs.com/cdnotes/p/14436189.html