groupon-wx/components/my-swiper/my-swiper.vue

<template>
	<view>
		<view class="uni-margin-wrap" v-if="list.length>0">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval">
					<swiper-item v-for="(item,index) in list" :key="index">
						<view class="content " @click="clickImg(item)">
							<image class="image " :src="item.imageUrl"></image>
							<view  class="number-box">
								<text class="number">{{ index + 1 }}/{{ list.length }}</text>
							</view>
						</view>
					</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>

	import {getAdsList} from '@/api/home.js';
	export default {
		name: "my-swiper",
		props: {
			autoplay: {
				type: Boolean,
				default () {
					return true
				},
			},
			interval: {
				type: Number,
				default () {
					return 3000
				},
			},
			indicatorDots: { //是否显示面板指示点
				type: Boolean,
				default () {
					return false
				},
			},

			type: {
				type: Number,
				default () {
					return -1
				},
			},
		},
		data() {
			return {
				list:[],
			};
		},
		created(){
			this.getAdsList(this.type);
		},

		methods:{
			clickImg(item){
				console.log("点击了广告图片",item)
				//跳转到某个页面，路劲由后端配置
				// uni.redirectTo({
				// 	url: item.targetUrl
				// });

			},
			getAdsList(type){
				console.log("+++++++++++++++++++++加载广告+++++++++++++++++++++")
				getAdsList({
					type : type
				}).then(res => {
					this.list=res.data;
				})
			}
		}
	}
</script>

<style>
	.uni-margin-wrap {
		width: 750rpx;
		height: 360rpx;
	}

	.swiper {
		height: 360rpx;
	}

	.image{
		width: 100%;
		height: 100%;
	}
	.content{
		width: 750rpx;
		height: 360rpx;
		position: relative;
	}
	.number-box{
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 6px;
		padding: 2rpx 12rpx 2rpx 12rpx;
		position: absolute;
		left: 10rpx;
		top: 10rpx;
	}

	.number{
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 20rpx;
		font-weight: NaN;
		text-align: center;
		white-space: nowrap;
		line-height: 28rpx;
	}
	.bord{
		border: 1px solid red;
	}
</style>