uniapp系列-04swiper组件轮播图开发

创建目录如图

名称不能直接为Swiper.vue或者swiper.vue,会出问题

把轮播图放在static中img目录下

在IndexSwiper.vue中编辑轮播图的src地址

每张图片的代码如图

<swiper-item>
			<view class="swiper-item">
				<image class="swiper-img" src="../../static/img/swiper1.jpg" mode=""></image>
			</view>
		</swiper-item>

且在每张图片前class命名为"swiper-img"来进行整个页面的大小调整

最终结果如下:

再在IndexSwiper进行大小调整,

IndexSwiper.vue完整代码

<template>
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
		<swiper-item>
			<view class="swiper-item">
				<image class="swiper-img" src="../../static/img/swiper1.jpg" mode=""></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item">
				<image class="swiper-img" src="../../static/img/swiper2.jpg" mode=""></image>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item">
				<image class="swiper-img" src="../../static/img/swiper3.jpg" mode=""></image>
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
</script>

<style scope>
swiper{
	width:100%;
	height: 400rpx;
}
	.swiper-img{
		width:100%;
		height: 400rpx;
		
	}
</style>

运行成功结果:会自动进行轮播,图片无压缩