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.
134 lines
2.8 KiB
134 lines
2.8 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="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>
|
|
|