uni-app 实现轮播图 swiper

uni-app 实现轮播图 swiper

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

vue学习教程推荐：

1、《 Vue3.0高阶实战：开发高质量音乐Web app 》 百度网盘

2、《 Vue3+ElementPlus+Koa2 全栈开发后台系统 》 百度网盘

3、《 Vue3 系统入门与项目实战 完整版  》百度网盘

4、《 Spring Boot + Vue3 前后端分离 实战wiki知识库系统 》 百度网盘

加客服微信： ITBOKE ，下载套餐有优惠哦。