01-组件轮播

组件

<template>
    <view>
        <view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" 
                    :indicator-color="ponitcolor"  
                    :indicator-active-color="currentcolor"
                    :circular="zidongxianjie"
                    :indicator-dots="indicatorDots" 
                    :autoplay="autoplay"        
                    :interval="interval" 
                    :duration="duration">

	                <swiper-item v-for="(item,index) in listArr" :key="index"> 
			    <image class="lun-bo-img" :src="item.img"></image>
                        </swiper-item>	

                    </swiper>
                </view>
            </view>
        </view>
		
    </view>
</template>

<script>
export default {
    data() {
        return {
            zidongxianjie:true,//自动衔接，
            background: ['color1', 'color2', 'color3'],
            indicatorDots: true,//是否显示面板指示点 就是下面那个小圆点
            autoplay: true,//是否自动播放
            ponitcolor:"#fff",//指示点的颜色
            currentcolor:"red",//当前指示点颜色
            interval: 2000,
            duration: 500,
        }
    },
     props:{
	listArr:{
	    type:Array
	}
     }
}
</script>

<style  scoped>
.lun-bo-img{
	width: 100%;
	height: 300rpx;
}
</style>

使用页面

<template>
	<view>
		<planting :listArr="listArr"></planting>
	</view>
</template>

<script>
	import planting  from "../../components/planting.vue"
	export default {
		data() {
			return {
				listArr:[
					{img:"https://s2.51cto.com/oss/202004/16/27e58c01fef2ca1e3f98093dbd719eb0.jpg"},
					{img:"https://s2.51cto.com/oss/202004/15/58878ce24c357ac43b16d965e994b918.jpg"},
					{img:"https://s3.51cto.com/oss/202004/14/0b0c76cc1c0c3646b8257240a9e34a77.jpg"},
					{img:"https://s2.51cto.com/oss/202004/14/48d3da17d0cbc03c38815860dc8a3610.jpg-wh_651x-s_3942643498.jpg"}
				]
			};
		},
		
		components:{
			"planting":planting
		}
	}
</script>

对于封装uni-app中的轮播组件。
更vue一样的。 
比如说v-for。
给图片赋值。
父传子
参数类型是一样