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.
132 lines
2.6 KiB
132 lines
2.6 KiB
3 years ago
|
<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>
|