Gaoxs
5 years ago
3 changed files with 193 additions and 131 deletions
@ -0,0 +1,176 @@ |
|||||||
|
<template> |
||||||
|
<view class="banner-swiper-box"> |
||||||
|
<canvas canvas-id="colorThief" class="hide-canvas"></canvas> |
||||||
|
<swiper class="banner-carousel shopro-selector-rect" circular @change="swiperChange" :autoplay="true"> |
||||||
|
<swiper-item v-for="(item, index) in list" :key="index" class="carousel-item" @tap="routerTo(item.path)"> |
||||||
|
<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 list.length" :key="index"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import colorThief from 'miniapp-color-thief'; |
||||||
|
|
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
swiperCurrent: 0, //轮播下标 |
||||||
|
webviewId: 0, |
||||||
|
bgcolorAry: [], |
||||||
|
list: [] |
||||||
|
}; |
||||||
|
}, |
||||||
|
props: { |
||||||
|
banner: { |
||||||
|
type: Array, |
||||||
|
default: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
created: async function () { |
||||||
|
await this.doColorThief(); |
||||||
|
|
||||||
|
}, |
||||||
|
async mounted() { |
||||||
|
|
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
watch: { |
||||||
|
banner(next) { |
||||||
|
this.list = next; |
||||||
|
this.doColorThief() |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
async doColorThief() { |
||||||
|
let that = this; |
||||||
|
// 获取轮播图 |
||||||
|
let item = this.list[this.swiperCurrent]; |
||||||
|
if(!item){ |
||||||
|
return |
||||||
|
} |
||||||
|
// 获取轮播图颜色 |
||||||
|
let bgcolor = this.bgcolorAry[this.swiperCurrent]; |
||||||
|
// 颜色不存在 |
||||||
|
if (!bgcolor) { |
||||||
|
let ctx = uni.createCanvasContext('colorThief', that.$scope); |
||||||
|
if (0 === that.webviewId || ctx.webviewId === that.webviewId) { |
||||||
|
that.webviewId = ctx.webviewId; |
||||||
|
uni.getImageInfo({ |
||||||
|
src: item.pic, |
||||||
|
success: function (image) { |
||||||
|
ctx.drawImage(image.path, 0, 0, image.width, image.height); |
||||||
|
ctx.draw(true, function (e) { |
||||||
|
console.log(e) |
||||||
|
uni.canvasGetImageData({ |
||||||
|
canvasId: 'colorThief', |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
width: parseInt(image.width), |
||||||
|
height: parseInt(image.height), |
||||||
|
success(res) { |
||||||
|
let newBgcolor = colorThief(res.data) |
||||||
|
.color() |
||||||
|
.getHex(); |
||||||
|
that.$set(that.bgcolorAry, that |
||||||
|
.swiperCurrent, |
||||||
|
newBgcolor); |
||||||
|
that.$emit('getbgcolor', newBgcolor); |
||||||
|
}, |
||||||
|
fail: function (error) { |
||||||
|
} |
||||||
|
}, that.$scope); |
||||||
|
}); |
||||||
|
}, |
||||||
|
fail: function (error) { |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
} else { |
||||||
|
that.$set(item, 'bgcolor', bgcolor); |
||||||
|
that.$emit('getbgcolor', bgcolor); |
||||||
|
} |
||||||
|
}, |
||||||
|
swiperChange(e) { |
||||||
|
this.swiperCurrent = e.detail.current; |
||||||
|
this.doColorThief(); |
||||||
|
let bgcolor = this.bgcolorAry[this.swiperCurrent]; |
||||||
|
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> |
||||||
Loading…
Reference in new issue