zhengyi/pages/product/common/topSwiper.vue

<template>
	<view class="carousel">
		<swiper  :circular="true" duration="400" @change="swiperChange">
			<swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index">
				<view class="image-wrapper"><image :src="item" class="loaded" mode="scaleToFill"></image></view>
			</swiper-item>
		</swiper>
		<view class="swiper-dots">
			<text class="num">{{ swiperCurrent + 1 }}</text>
			<text class="sign">/</text>
			<text class="num">{{ imgList | num }}</text>
		</view>
	</view>
	
</template>

<script>
export default {
	props: {
		imgList: {
			type: Array,
			default: function () {
				return []
			}
		},
	},
	data() {
		return {
			swiperCurrent: 0,
			swiperLength: 0
		};
	},
	filters: {
		num(val) {
			if(val){
				
				return val.length
			}
			return 0
		}
	},
	methods: {
		swiperChange(e) {
			let index = e.detail.current;
			this.swiperCurrent = index;
			
		}
	}
};
</script>

<style lang="scss">
.carousel {
	/* #ifdef APP-PLUS */
	padding-top: var(--status-bar-height);
	/* #endif */
	height: 520rpx;
	position: relative;
	swiper {
		height: 100%;
	}
	.image-wrapper {
		width: 100%;
		height: 100%;
	}
	.swiper-item {
		display: flex;
		justify-content: center;
		align-content: center;
		height: 700rpx;
		overflow: hidden;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
.swiper-dots {
	position: absolute;
	bottom: 30rpx;
	right: 26rpx;
	color: red;
	background-color: red;
	z-index: 99;
	width: 88rpx;
	height: 42rpx;
	background: #000000;
	opacity: 0.5;
	border-radius: 21rpx;

	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 42rpx;
	text-align: center;
}
</style>