partnerApp/components/modules/index/swiper-image.vue

<template>
	<view>
		<view class="swiper-view">
			<swiper class="swiper" :indicator-dots="indicatorDots" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular" :vertical="vertical"  @change="changeEvent" :style="'height:'+height">
				<swiper-item v-for="(item,index) in resdata" :key="index" @tap="tipEvent(item)" :style="'height:'+height">
					<image mode="widthFix" :src="item.image" :style="'height:'+height" lazy-load></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			resdata:Array,
			indicatorDots:{ //是否显示面板指示点
				type:Boolean,
				default:true
			},
			indicatorColor:{ //指示点颜色
				type:String,
				default:'rgba(0, 0, 0, .3)'
			},
			indicatorActiveColor:{ //当前选中的指示点颜色
				type:String,
				default:"#FFFFFF"
			},
			autoplay:{ //是否自动切换
				type:Boolean,
				default:true
			},
			interval:{ //自动切换时间间隔
				type:Number,
				default:5000
			},
			duration:{ //滑动动画时长
				type:Number,
				default:500
			},
			circular:{ //是否循环衔接
				type:Boolean,
				default:true
			},
			vertical:{ //是否循环衔接
				type:Boolean,
				default:false
			},
			height:{ //轮播高度
				type:String,
				default:"280upx"
			}
		},
		methods:{
			changeEvent(event){
				this.$emit('changeEvent',event)
			},
			tipEvent(item){
				if(!!item.url){
					console.log("点击了轮播图");
				}
			}
		}
	}
</script>

<style>
</style>