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进来，网络图片直接写地址。