轮播组件（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>
数据源
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'
}
]
