uni-app 实现轮播图 swiper

使用介绍

<swiper
    indicator-dots // 是否添加圆点指示器
    circular // 是否可以循环滑动
    autoplay // 自动轮播
    interval=3000 // 轮播间隔
    @change=改变回调(e){event.detail.current // 可获取当前轮播索引}
>
    <swiper-item>轮播的数据</swiper-item>
</swiper>

项目实际代码

<template>
	<view class="content">
		<view class='home'>
			<swiper
			indicator-dots 	
			circular
			autoplay
			interval=3000
			>
				<swiper-item v-for="(item,index) in swipers" :key="index">
					<image :src="item"></image>
				</swiper-item>
				<swiper-item>2</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: 'Hello',
				swipers:[]
			}
		},
		onLoad() {
			//模拟ajax获取数据，uni.request({...});注意回调的this指向
			this.swipers=['https://app-file.beitaichufang.com/img/H5/web/banner/banner20.jpg',
			"https://app-file.beitaichufang.com/img/H5/web/banner/banner21.jpg",
			"https://app-file.beitaichufang.com/img/H5/web/banner/banner22.jpg",
			"https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg"
			];
			
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.home{
		swiper{
			width: 750rpx;
		}
		image{
			width: 100%;
			height: 100%;
		}
	}
</style>

注意：本地图片要require进来，网络图片直接写地址。