輪播組件（Carousel）

<!-- 輪播圖組件 -->
<template>
    <view>
        <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
            <swiper-item v-for="item in imagelist" :key="item.Guid">
                <view class="swiper-item" >
                    <image :src="item.ImageUrl"></image>
                </view>
            </swiper-item>
            
        </swiper>
    </view>
</template>

<script>
    export default {
        props: ["imagelist"],
    }
</script>

<style>
    .swiper {
        height: 200px;
        width: 100%;
        
    }

    .swiper-item {
        height: 100%;
        width: 100%;
    }

    .swiper-item image {
        height: 100%;
        
    }
</style>

數(shù)據(jù)源
imagelist:[
                    {
                        "Guid": "24ac92f3-c85a-4a12-b6f8-846e473f4594",
                        'ImageUrl':'../../static/image/1.jpg'
                    },
                    {
                        "Guid": "24ac92f3-c85a-4a12-b6f8-846e473f4594",
                        'ImageUrl':'../../static/image/2.jpg'
                    },
                    {
                        "Guid": "24ac92f3-c85a-4a12-b6f8-846e473f4594",
                        'ImageUrl':'../../static/image/3.jpg'
                    }
                    
                ]