EP1 banner海报swiper轮播器

文件路径： E:/homework/uniappv3tswallpaper/pages/index/index.vue

<template>
	<view class="homeLayout">
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true"
				indicator-color="rgba(255,255,255,0.5)">
				<swiper-item v-for="item in 3">
					<image src="../../common/images/banner1.jpg" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss">
	.homeLayout {
		.banner {
			width: 750rpx;
			padding: 30rpx 0;

			swiper {
				width: 100%;
				height: 340rpx;

				&-item {
					width: 100%;
					height: 100%;
					padding: 0 30rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
</style>

文件路径： E:/homework/uniappv3tswallpaper/App.vue

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import "common/style/common-style.scss"
</style>

文件路径： E:/homework/uniappv3tswallpaper/common/style/common-style.scss

view,swiper,swiper-item{
	box-sizing: border-box;
}

注意：
已经在common文件夹中添加过测试时使用的图片资源。