uni-app用vue來作一個輪播圖

<template>
	<view>
		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box" @change="change" :autoplay="autoplay">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<image :src="item.content" mode=""></image>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		
	</view>
	
</template>

<script>
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	export default {
		components: {
			uniSwiperDot
		},
		data() {
			return {
				autoplay:true,
				info: [{
					content: 'https://img-cdn-qiniu.dcloud.net.cn/static/images/ad/uniapp-xiaomi.png'
				}, {
					content: 'https://img-cdn-qiniu.dcloud.net.cn/static/images/ad/uniapp-douyin.jpg'
				}, {
					content: 'https://img.php.cn/upload/article/000/000/020/5ceb57480713f714.jpg'
				}],
				current: 3,
				mode: 'default',//提示小點的樣式
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style>
	.swiper-box {
		border-radius: 0rpx;
		padding: 0px;
	}

</style>

　　

import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'    這個是必要引進的文件