zsw-farm-bxg/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" @click="goRoll(item)" mode="aspectFill" 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: {
			async doColorThief() {
				let that = this;
				// 获取轮播图
				let item = this.detail[this.swiperCurrent];
				// 获取轮播图颜色
				// let bgcolor = item.color;
				// // 颜色不存在
				// if (!bgcolor) {
				// 	that.$set(item, 'bgcolor', '#0e2be6');
				// 	that.$emit('getbgcolor', '#0e2be6');
				// } 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;
				// this.$emit('getbgcolor', 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: 678rpx;
		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: 32rpx;
		// left: 50%;
		// transform: translateX(-50%);
		bottom: 76rpx;
		z-index: 5;

		.banner-dot {
			width: 8rpx;
			height: 8rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 50%;
			margin-right: 16rpx;
			transition: width .5s cubic-bezier(.18,.89,.17,.88);
		}

		.banner-dot-active {
			width: 34rpx;
			height: 8rpx;
			background: #3A3A3C;
			border-radius: 6rpx;
			margin-right: 16rpx;
			transition: width .5s cubic-bezier(.18,.89,.17,.88);
		}
	}


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