提示：在进行代码之前，需要先添加swiper组件

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、swiper是什么？

示例：swiper是基于uni-app的一种工具，该工具是为了解决轮播图而创建的。

二、使用步骤

1.建立页面

以下是完整代码：

<template>
	<view class="content">
		<swiper :indicator-dots="true" 
		        :autoplay="true"       
				:interval="2000"  
			    indicator-color="rgba(0, 0, 0, 0.3)"
				indicator-active-color="#000000"
				:duration="1000"
				circular>      
			<swiper-item class="swiper-item" v-for="item in List">
				<view class="swiper-item">
					<image :src="item.img"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {  
			return {
				List:[
					{
						id:1,
						img:"../../static/lunbo/1.jpg"
					},
					{
						id:1,
						img:"../../static/lunbo/2.jpg"
					},
					{
						id:1,
						img:"../../static/lunbo/3.jpg"
					},
					{
						id:1,
						img:"../../static/lunbo/4.jpg"
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.content{
		width: 100%;
		height: 800rpx;
		background-color: bisque;
	}
	.swiper-item{
		width: 85%;
		background-color: aqua;
		margin: 0 auto;
	}
	
</style>

总结

uni-app功能强大，在提供我们组建的同时，也给我们了很多属性，例如：

indicator-dots  是否显示面板指示点，

indicator-color  指示点颜色 

indicator-active-color  当前选中的指示点颜色

autoplay  是否自动切换

interval  自动切换时间间隔

duration  滑动动画时长

circular  是否采用衔接滑动，即播放到末尾后重新回到开头......

swiper详细属性请点击此处查看：swiper | uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/component/swiper.html#swiper