实现效果

代码

<template>
	<view class="content paddingbox2">
		<!--banner-->
		<view class="swiperbox">
	        <swiper class="swiper" indicator-dots="true" autoplay interval="2000" duration="500" >
				<swiper-item v-for="(item,index) in swiperlist" :key="index">
					<image mode="aspectFill" :src="item.image_src" />
				</swiper-item>
				<!-- <swiper-item>
					<image mode="aspectFill" src="../../static/banner2.png" />
				</swiper-item>
				<swiper-item>
					<image mode="aspectFill" src="../../static/banner3.png" />
				</swiper-item> -->
			</swiper>
		</view>
	</view>
</template>

<style>
	.swiper {
		width: 100%;
	}
	.swiper image {
		height: 100%;
		width: 100%;
	}
</style>
<script>
	export default {
		data() {
			return {
				swiperlist:[]
			}
		},
		onShow() {
			this.getswiper();
		},
		methods: {
			getswiper(){
				// 	//获取轮播图的数据
				uni.request({
				    url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata', 
				    success: (res) => {
						this.swiperlist=res.data.message
				    }
				});
			},
		}
	}
</script>