04 首页swiper部分

1. 完成效果图

2.新建IndexSwiper.vue文件

新建IndexSwiper.vue文件目录结构如图：

新建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 scoped>
swiper{
	width:100%;
	height: 400rpx;
}
.swiper-img{
	width:100%;
	height: 400rpx;
}	
</style>

在pages/index/index.vue中引入IndexSwiper组件代码如下：

<template>
	<view class='index'>
		
		<IndexSwiper></IndexSwiper>
		
	</view>
</template>

<script>
	import IndexSwiper from '@/components/index/IndexSwiper.vue'
	export default {
		data() {
			return {
			
			}
		},
		components:{
			IndexSwiper
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style scoped>

</style>

3. swiper的坑

swiper的坑总结：

1. 组件名称swiper.vue 或者 Swiper.vue , 在传递数据的时候有可能图片就不见了。
2. 改变图片的大小咱们要用rpx的单位。
3. 本身swiper是有150px的默认高度，app中需要改变默认高度需要加入:

   swiper{
   		width:100%;
   		height:400rpx;
   	}