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="scaleToFill" :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>