ledehui-c/src/components/SwiperBanner/SwiperBanner.vue

<template>
	<view class="detail-banner" :style="{height:bannerH/3.75+'vw'}">
		<swiper :autoplay="autoPlay" :interval="4000" :duration="500" :circular="true" class="swiper-box"
			:previous-margin="previousNext" :next-margin="previousNext" :snap-to-edge="true" @change="swiperChange"
			v-if="bannerDetail.length">
			<block v-for="(item,index) in bannerDetail" :key="index">
				<swiper-item
					:class="[bannerType=='3D'?(index === cur?'swiper-bigger':'swiper-smaller'):'','swiper-item']">
					<image v-if="item.type === 1" mode="aspectFill" @tap.stop="chooseSwiper(item)" :lazy-load="true"
						:style="{borderRadius:radius/3.75+'vw'}"
						:class="[bannerType=='3D'?(index === cur?'image-bigger':'image-smaller'):'banner-image']"
						:src="(item[imgKey] ? item[imgKey].url : '') || (item ? item.url : '')" />
					<video v-if="item.type === 2 && index === cur" mode="aspectFill" @tap.stop="chooseSwiper(item)" :lazy-load="true"
						:style="{borderRadius:radius/3.75+'vw'}"
						:class="[bannerType=='3D'?(index === cur?'image-bigger':'image-smaller'):'banner-image']"
						:src="(item[imgKey] ? item[imgKey].url : '') || (item ? item.url : '')"></video>

				</swiper-item>

			</block>
		</swiper>

		<!--重置小圆点的样式  -->
		<view class="dots" v-if="indicatorDots">
			<view class="dots-bk" v-if="dotsType=='dot'">
				<block v-for="(item,index) in bannerDetail.length" :key="index">
					<view :class="{active: index == cur}"
						:style="{backgroundColor:index == cur?indicatorColor:noIndicatorColor}" class="dot"></view>
				</block>
			</view>
			<view class="dots-bk dots-bk1" v-if="dotsType=='digit'">
				<view class="tag-wrap">
					<text>{{cur+1+'/'+bannerDetail.length}}</text>
				</view>
			</view>

		</view>
		<!-- 收藏图标 -->
		<!-- <slot name="collection"></slot> -->
		<!--重置小圆点的样式 end -->

		<!--  没有轮播时的默认图 -->
		<!-- <image
            wx:else="{{bannerDetail.length}}"
            class="banner-image"
            src="{{filters.imageFmt('good-default@2x')}}"
        /> -->
	</view>
</template>

<script lang="ts">
	import {
		Component,
		Prop,
		Emit,
		Vue
	} from "vue-property-decorator";

	@Component({})
	export default class swiperBanner extends Vue {
		@Prop({
			default: true
		}) private indicatorDots! : boolean; // 是否自定义指示点
		@Prop({
			default: 'dot'
		}) dotsType ?: string; // 自定义指示点样式 可选 dot / digit

		@Prop({
			default: true
		}) private autoPlay ?: boolean; // 自动切换

		@Prop() bannerDetail! : Array<any>; // 轮播数据

		@Prop({
			default: 154
		}) private bannerH! : number; // 轮播图高度

		@Prop({
			default: '#fff'
		}) private indicatorColor ?: string; // 自定义指示点颜色

		@Prop({
			default: 'rgba(255,255,255,1)'
		}) private noIndicatorColor ?: string; // 未选中指示点颜色

		@Prop({
			default: 0
		}) private radius ?: number; // 自定义圆角 默认没有

		@Prop({
			default: false
		}) private preview ?: boolean; // 开启预览图片 与点击跳转只可存在一个

		@Prop() private bannerType ?: string; //轮播样式类型

		@Prop({
			default: "0rpx"
		}) private previousNext ?: string; //前后轮播 缩进尺寸	

		@Prop({
			default: ""
		}) private imgKey! : string // // 图片的字段

		// options:{
		//  //  开启具名插槽
		//  multipleSlots: true ,

		cur : number = 0 // 当前滑块的index
		swiperChange(e : any) {
			this.cur = e.detail.current //获取当前轮播图片的下标, 可以给当前指示点加样式
			this.changeIndex(e.detail.current + 1);
		}
		//点击轮播
		chooseSwiper(item : any) {
			// console.log(item)
			if (this.preview) {
				let urls = this.bannerDetail.map(res => res[this.imgKey] || res)
				uni.previewImage({
					current: item[this.imgKey] || item,
					loop: true,
					urls,
				})
			} else {
				this.changeSwiper(item)
			}
		}

		@Emit('changeSwiper')
		changeSwiper(val : any) {
			return val
		}
		
		@Emit('changeIndex')
		changeIndex(val : any) {
			return val
		}
	};
</script>

<style lang="scss" scoped>
	.detail-banner {
		width: 100%;
		position: relative;
		// background: #d8d8d8;
		overflow: hidden;

		.swiper-box {
			height: inherit;

		}

		.banner-image {
			width: 100%;
			height: 100%;
		}
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.swiper-bigger {
		height: 100%
	}

	.swiper-smaller {
		// height:80%
		height: 100%
	}

	@keyframes Bigger {
		from {
			height: 80%
		}

		to {
			height: 100%
		}
	}

	@keyframes Smaller {
		from {
			height: 100%
		}

		to {
			height: 80%
		}
	}

	// 中间的轮播图
	.image-bigger {
		margin: 0 vw(10);
		height: 100%;
		width: 100%;
		overflow: hidden;
		// animation: Bigger 0.5s;
		// -webkit-animation: heightChange 0.7s; /* Safari 与 Chrome */
	}

	// 两边的缩小的图片
	.image-smaller {
		height: 100%;
		// animation: Smaller 0.5s;
	}


	.dots {
		position: absolute;
		bottom: vw(12);
		height: vw(10);
		width: 100%;
		@include flex-x(center)
	}

	.dots-bk {
		background: rgba(0, 0, 0, 0.1);
		height: vw(10);
		padding: 0 vw(3);
		border-radius: vw(10);

		@include flex-x() &.dots-bk1 {
			background: none
		}

		// 指示点的第二种样式
		.tag-wrap {
			position: absolute;
			right: vw(15);
			background: #333;
			color: #fff;
			height: vw(20);
			line-height: vw(20);
			padding: vw(1) vw(10);
			border-radius: vw(10);
			font-size: vw(12);
		}
	}

	/* 未选中时的小圆点样式 */
	.dot {
		margin-right: vw(8);
		border-radius: vw(6);
		height: vw(6);
		width: vw(6);
		margin: 0 vw(3)
	}

	/* 选中以后的小圆点样式 */
	.active {
		width: vw(12);
	}
</style>