一、【首页】swiper部分
1.1 完成效果图：
1.2 新建IndexSwiper.vue文件，目录结构如图
1.3 新建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/image/swiper1.jpg" mode=""></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<image class='swiper-img' src="../../static/image/swiper2.jpg" mode=""></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">
<image class='swiper-img' src="../../static/image/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>1.4 pages/index/index.vue代码如下：
<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>
</style>1.5 swiper的坑总结：
1.5.1 组件名称swiper.vue 或者 Swiper.vue , 在传递数据的时候有可能图片就不见了。
1.5.2 改变图片的大小咱们要用rpx的单位。
1.5.3 本身swiper是有150px的默认高度，app中需要改变默认高度需要加入:
swiper{
width:100%;
height:400rpx;
}
标签：1.5,vue,index,400rpx,width,首页,部分,swiper From： https://www.cnblogs.com/liu88/p/17035285.html