You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

131 lines
2.6 KiB

<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="widthFix" 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', '#c40414');
that.$emit('getbgcolor', '#c40414');
} 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: 350upx;
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: 14rpx;
height: 14rpx;
background: rgba(255, 255, 255, 1);
border-radius: 50%;
margin-right: 10rpx;
}
.banner-dot-active {
width: 14rpx;
height: 14rpx;
background: #a8700d;
border-radius: 50%;
margin-right: 10rpx;
}
}
.hide-canvas {
position: fixed !important;
top: -99999upx;
left: -99999upx;
z-index: -99999;
}
</style>