uniapp中设置轮播图

实现：在uniapp中设置轮播图

先看效果图

 

找不到现成的接口，先在网上找几张图片，为了防链接失效，直接把图片传到文章里，文章在图就在

 

https://i-blog.csdnimg.cn/blog_migrate/99b7cd44a9e6d1d97efa2bc432fa2be2.png

 

https://i-blog.csdnimg.cn/blog_migrate/f0fa516089b8ebb7e43cd5a55080ff27.jpeg

 

https://i-blog.csdnimg.cn/blog_migrate/459a2db750fd59ca43b295a961f3b314.jpeg

帅气的图片就是这么超大张

用的是HBuilder X 3.1.7

建项目可以随便建，也可以参考这篇文章

https://blog.csdn.net/yougcave/article/details/116666640

建好后先复制上面三张大图的链接保存到index.vue的data数组swipers里

<script>
	export default {
		data() {
			return {
				swipers:[
					'https://i-blog.csdnimg.cn/blog_migrate/99b7cd44a9e6d1d97efa2bc432fa2be2.png',
					'https://i-blog.csdnimg.cn/blog_migrate/f0fa516089b8ebb7e43cd5a55080ff27.jpeg',
					'https://i-blog.csdnimg.cn/blog_migrate/459a2db750fd59ca43b295a961f3b314.jpeg',
				]
			}
		},
	}
</script>

然后在index.vue里开始写代码

uniapp有个现成的轮播图组件 swiper 而且自带了不少属性，查表就能写

<template>
	<view class="home">
		<!--circular用来设置循环轮播   indicator-dots设置下面小圆点用来点击 -->
		<swiper circular indicator-dots>
			<!-- v-for循环遍历数组 -->
			<swiper-item v-for="item in swipers" >
				<image :src="item"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

最后在CSS里改下图片大小就完事了

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

这个挺简单，完事，记住uniapp里有个swiper组件就好了