修改轮播图卡顿的问题
This commit is contained in:
Gaoxs
@ -1,97 +1,119 @@
|
||||
<template>
|
||||
<view class="lottie-bg">
|
||||
<view id="lottie">
|
||||
<image
|
||||
src="../../static/images/live-logo.gif"
|
||||
rel="preload"
|
||||
mode="widthFix"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
<image src="../../static/images/live-logo.gif" rel="preload" mode="widthFix" style="width: 100%;" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from "vuex";
|
||||
// 组件
|
||||
// import request from "@//api/request";
|
||||
import { wxappAuth, getUser } from "@/api/user";
|
||||
import dayjs from "dayjs";
|
||||
import cookie from "@/utils/store/cookie";
|
||||
import { parseQuery, login, handleQrCode } from "@/utils";
|
||||
import {
|
||||
mapState,
|
||||
mapMutations,
|
||||
mapActions
|
||||
} from "vuex";
|
||||
// 组件
|
||||
// import request from "@//api/request";
|
||||
import {
|
||||
wxappAuth,
|
||||
getUser
|
||||
} from "@/api/user";
|
||||
import dayjs from "dayjs";
|
||||
import cookie from "@/utils/store/cookie";
|
||||
import {
|
||||
parseQuery,
|
||||
login,
|
||||
handleQrCode
|
||||
} from "@/utils";
|
||||
|
||||
export default {
|
||||
name: "Loading",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
onShow() {
|
||||
|
||||
var url = handleQrCode();
|
||||
// 判断是否是分销
|
||||
if (url) {
|
||||
var spread = cookie.get("spread");
|
||||
let urlSpread = parseInt(url.spread);
|
||||
if (!Number.isNaN(urlSpread) && spread !== urlSpread) {
|
||||
cookie.set("spread", urlSpread || 0);
|
||||
} else if (spread === 0 || typeof spread !== "number") {
|
||||
cookie.set("spread", urlSpread || 0);
|
||||
export default {
|
||||
name: "Loading",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
onShow() {
|
||||
|
||||
var url = handleQrCode();
|
||||
// 判断是否是分销
|
||||
if (url) {
|
||||
var spread = cookie.get("spread");
|
||||
let urlSpread = parseInt(url.spread);
|
||||
if (!Number.isNaN(urlSpread) && spread !== urlSpread) {
|
||||
cookie.set("spread", urlSpread || 0);
|
||||
} else if (spread === 0 || typeof spread !== "number") {
|
||||
cookie.set("spread", urlSpread || 0);
|
||||
}
|
||||
}
|
||||
if (this.$store.getters.token) {
|
||||
this.toLaunch();
|
||||
return;
|
||||
}
|
||||
// cookie.get("spread");
|
||||
// if (this.$deviceType == "weixin") {
|
||||
// let path = parseQuery().path
|
||||
// console.log(this)
|
||||
// if (path) {
|
||||
// this.$yrouter.push({
|
||||
// path
|
||||
// });
|
||||
// } else {
|
||||
// this.$yrouter.switchTab({
|
||||
// path: "/pages/home/index"
|
||||
// });
|
||||
// }
|
||||
|
||||
// return
|
||||
// }
|
||||
// this.toLaunch();
|
||||
if (this.$deviceType == "app" || this.$deviceType == "h5") {
|
||||
// this.toLaunch();
|
||||
|
||||
this.$yrouter.switchTab({
|
||||
path: "/pages/home/index"
|
||||
});
|
||||
return;
|
||||
}
|
||||
login().finally(() => {
|
||||
this.$yrouter.switchTab({
|
||||
path: "/pages/home/index"
|
||||
});
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["changeAuthorization", "setUserInfo"]),
|
||||
toLaunch() {
|
||||
console.log("loading home");
|
||||
this.changeAuthorization(false);
|
||||
this.$yrouter.switchTab({
|
||||
path: "/pages/home/index"
|
||||
});
|
||||
}
|
||||
}
|
||||
if (this.$store.getters.token) {
|
||||
this.toLaunch();
|
||||
return;
|
||||
}
|
||||
cookie.get("spread");
|
||||
// this.toLaunch();
|
||||
if (this.$deviceType == "app"||this.$deviceType == "h5") {
|
||||
// this.toLaunch();
|
||||
this.$yrouter.switchTab({
|
||||
path: "/pages/home/index"
|
||||
});
|
||||
return;
|
||||
}
|
||||
login().finally(() => {
|
||||
this.$yrouter.switchTab({
|
||||
path: "/pages/home/index"
|
||||
});
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["changeAuthorization", "setUserInfo"]),
|
||||
toLaunch() {
|
||||
console.log("loading home");
|
||||
this.changeAuthorization(false);
|
||||
this.$yrouter.switchTab({
|
||||
path: "/pages/home/index"
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.lottie-bg {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.lottie-bg {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#lottie {
|
||||
width: 35%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
transform: translate3d(0, 0, 0);
|
||||
margin: auto;
|
||||
}
|
||||
#lottie {
|
||||
width: 35%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
transform: translate3d(0, 0, 0);
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
<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 list" :key="index" class="carousel-item" @tap="routerTo(item.path)">
|
||||
<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 list.length" :key="index"></text>
|
||||
v-for="(dot, index) in detail.length" :key="index"></text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@ -22,43 +22,28 @@
|
||||
return {
|
||||
swiperCurrent: 0, //轮播下标
|
||||
webviewId: 0,
|
||||
bgcolorAry: [],
|
||||
list: []
|
||||
};
|
||||
},
|
||||
props: {
|
||||
banner: {
|
||||
detail: {
|
||||
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 item = this.detail[this.swiperCurrent];
|
||||
// 获取轮播图颜色
|
||||
let bgcolor = this.bgcolorAry[this.swiperCurrent];
|
||||
let bgcolor = item.bgcolor;
|
||||
// 颜色不存在
|
||||
if (!bgcolor) {
|
||||
let ctx = uni.createCanvasContext('colorThief', that.$scope);
|
||||
if (bgcolor === '') {
|
||||
let ctx = uni.createCanvasContext('colorThief', that);
|
||||
if (0 === that.webviewId || ctx.webviewId === that.webviewId) {
|
||||
that.webviewId = ctx.webviewId;
|
||||
uni.getImageInfo({
|
||||
@ -67,26 +52,22 @@
|
||||
ctx.drawImage(image.path, 0, 0, image.width, image.height);
|
||||
ctx.draw(true, function (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);
|
||||
canvasId: 'colorThief',
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: parseInt(image.width),
|
||||
height: parseInt(image.height),
|
||||
success(res) {
|
||||
let bgcolor = colorThief(res.data)
|
||||
.color()
|
||||
.getHex();
|
||||
that.$set(item, 'bgcolor', bgcolor);
|
||||
that.$emit('getbgcolor', bgcolor);
|
||||
}
|
||||
},
|
||||
fail: function (error) {
|
||||
}
|
||||
}, that.$scope);
|
||||
that
|
||||
);
|
||||
});
|
||||
},
|
||||
fail: function (error) {
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -98,6 +79,8 @@
|
||||
swiperChange(e) {
|
||||
this.swiperCurrent = e.detail.current;
|
||||
this.doColorThief();
|
||||
let bgcolor = this.detail[this.swiperCurrent].bgcolor;
|
||||
this.$emit('getbgcolor', bgcolor);
|
||||
},
|
||||
|
||||
// 路由跳转
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
<image src="@/static/images/qr.png" />
|
||||
</view>
|
||||
</view>
|
||||
<Banner :banner="banner" @getbgcolor="getbgcolor"></Banner>
|
||||
<Banner :detail="banner" v-if="banner.length>0" @getbgcolor="getbgcolor"></Banner>
|
||||
<uni-notice-bar scrollable="true" @click="goRoll(singNew)" single="true" :speed="10" showIcon="true"
|
||||
:text="singNew.info"></uni-notice-bar>
|
||||
<view class="content_box home_content_box">
|
||||
@ -215,6 +215,7 @@
|
||||
});
|
||||
getHomeData().then(res => {
|
||||
that.logoUrl = res.data.logoUrl;
|
||||
res.data.banner.map(item => item.bgcolor = '')
|
||||
that.$set(that, 'banner', res.data.banner);
|
||||
that.$set(that, 'menus', res.data.menus);
|
||||
that.$set(that, 'roll', res.data.roll);
|
||||
|
||||
Reference in New Issue
Block a user