retail-app/components/swiper-box/swiper-box.vue

<template>
	<view class="swiper-box">
		<swiper class="swiper" indicator-active-color="#f5f5f5" circular :indicator-dots="indicatorDots"
			:autoplay="autoplay" :duration="duration" :interval="3000" :current="current"
			:style="{ height: swiperHeight + 'px' }" @change="change">
			<swiper-item v-for="(item, index) in list" :key="item.id" item.id @click="click(item)">
				<image class="img" :src="item" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view v-if="list.length > 1" class="fix-num">{{current+1}}/{{list.length}}</view>
	</view>
</template>

<script>
	import {
		toRpx
	} from '@/utils/calculate.js'
	export default {
		props: {
			list: Array, // swiper图片列表
		},
		data() {
			return {
				indicatorDots: true, // 是否显示面板指示点
				autoplay: false, // 是否自动切换
				duration: 300, // 滑动动画时长
				swiperHeight: 375, //滑块的高度(单位px)
				current: 0,
				activeColor: '#000'
			}
		},
		mounted() {
			this.swiperHeight = this.$store.state.info.systemInfo.screenWidth
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			click(item) {
				this.$emit('click', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-box {
		position: relative;
		width: 100%;

		// height: 749rpx;
		.swiper {

			// height: 749rpx;
			.img {
				width: 100%;
				height: 100%;
			}
		}

		.fix-num {
			background-color: #000;
			position: absolute;
			bottom: 50rpx;
			right: 38rpx;
			padding: 5rpx 16rpx;
			font-size: 25rpx;
			border-radius: 19rpx;
			opacity: 0.6;
			color: #fff;
		}
	}
</style>