uniapp轮播图

<template>
	<view class="">
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
		 :indicator-active-color="active_color" :circular="circular">
			<swiper-item v-for="(item,index) in imgs" :key="index">
				<image :src="item.url" mode="" style="width:200px;height:200px;"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
    
    
		name: "",
		data() {
    
    
			return {
    
    
				active_color: "#AE81FF", //当前选中的指示点颜色
				indicatorDots: true, //是否显示面板指示点
				autoplay: true, //是否自动切换
				interval: 2000, //自动切换时间间隔
				duration: 500, //滑动动画时长
				circular: true, //是否采用衔接滑动,即播放到末尾后重新回到开头
				imgs: [{
    
    
						url: require("../../static/logo.png"),
					},
					{
    
    
						url: require("../../static/logo.png"),
					},
					{
    
    
						url: require("../../static/logo.png"),
					},
					{
    
    
						url: require("../../static/logo.png"),
					},
				]
			}
		},
		methods: {
    
    

		},
	}
</script>

<style>
</style>

猜你喜欢

转载自blog.csdn.net/weixin_49295874/article/details/113181804