swiper

swiper的坑：

1.组件的名称使用swiper.vue或Swiper.vue,在传递数据的时候有可能图片就不见了
2.改变图片的大小用rpx单位
3.本身swiper有150rpx的默认高度，APP中要改变需加入
swiper{
width: 100%;
height: 400rpx;
}

swiper组件indexSwiper.vue

<template>
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
        <swiper-item>
            <view class="swiper-item">
                <img src="@/static/banner/1.jpg">
            </view>
        </swiper-item>
        <swiper-item>
            <view class="swiper-item">
                <img src="@/static/banner/2.jpg">
            </view>
        </swiper-item>
    </swiper>
</template>

<script>
</script>

<style>
    swiper{
        width: 100%;
        height: 400rpx;
    }
</style>

使用

import indexSwiper from "@/components/index/indexSwiper.vue";
components:{
            indexSwiper
        },

<view class="index">
        <indexSwiper></indexSwiper>
    </view>