BD-LDBD-UNI/pages/home/components/Banner.vue

<template>
	<view class="banner-swiper-box">
		<canvas canvas-id="colorThief" class="hide-canvas"></canvas>
		<swiper class="banner-carousel Shop-selector-rect" circular @change="swiperChange" :autoplay="true">
			<swiper-item v-for="(item, index) in detail" :key="index" class="carousel-item">
				<image class="swiper-image" :src="item.pic" mode="heightFix" lazy-load>
				</image>
			</swiper-item>
		</swiper>
		<view class="banner-swiper-dots">
			<text :class="swiperCurrent === index ? 'banner-dot-active' : 'banner-dot'" v-for="(dot, index) in detail.length"
			 :key="index"></text>
		</view>
	</view>
</template>

<script>
	import colorThief from 'miniapp-color-thief';

	export default {
		data() {
			return {
				swiperCurrent: 0, //轮播下标
				webviewId: 0,
			};
		},
		props: {
			detail: {
				type: Array,
				default: []
			}
		},
		created: async function() {
			await this.doColorThief();
		},
		computed: {},
		methods: {
			doColorThief() {
				let that = this;
				// 获取轮播图
				let item = this.detail[this.swiperCurrent];
				// 获取轮播图颜色
				let bgcolor = item.color;
				// 颜色不存在
				if (!bgcolor) {
					that.$set(item, 'bgcolor', '#2A2A2A');
					that.$emit('getbgcolor', '#2A2A2A');
				} else {
					that.$set(item, 'bgcolor', bgcolor);
					that.$emit('getbgcolor', bgcolor);
				}

			},
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
				this.doColorThief();
				let bgcolor = this.detail[this.swiperCurrent].bgcolor;
			},

			// 路由跳转
			goRoll(item) {
				if (item.uniapp_url) {
					this.$yrouter.push(item.uniapp_url)
				}
			},
		}

	}
</script>

<style lang="less">
	// 轮播
	.banner-swiper-box {
		background: #fff;
	}

	.banner-swiper-box,
	.banner-carousel {
		width: 750rpx;
		height: 380rpx;
		position: relative;

		.carousel-item {
			width: 100%;
			height: 100%;
			// padding: 0 28upx;
			overflow: hidden;
		}

		.swiper-image {
			width: 100%;
			height: 100%;
			// border-radius: 10upx;
			// background: #ccc;
		}
	}

	.banner-swiper-dots {
		display: flex;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 20rpx;
		z-index: 5;

		.banner-dot {
			width: 8rpx;
			height: 8rpx;
			border-radius: 50%;
			margin-right: 6rpx;
			background: rgba(255, 255, 255, 1);
		}

		.banner-dot-active {
			width: 30rpx;
			height: 8rpx;
			background: #C3102E;
			border-radius: 4rpx;
			margin-right: 6rpx;
		}
	}


	.hide-canvas {
		position: fixed !important;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}
</style>