cxc/yshopb2c-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改轮播图卡顿的问题

Browse Source 
修改app上菜单栏尺寸过小的问题
This commit is contained in:
xuwenbo
2020-09-15 13:17:19 +08:00
parent 8a85f44ff6
commit cd4be74b4e
13 changed files with 5747 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
pages/Loading/index.vue
View File

@ -1,12 +1,7 @@
<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>
@ -28,8 +23,8 @@ export default {
onShow() {
var url = handleQrCode();
if(!url){
url = handleUrlParam(getCurrentPageUrl())
if (!url) {
url = handleUrlParam(getCurrentPageUrl())
}
// 判断是否是分销
if (url) {
@ -40,61 +35,77 @@ export default {
} else if (spread === 0 || typeof spread !== "number") {
cookie.set("spread", urlSpread || 0);
}
}
if (this.$store.getters.token) {
this.toLaunch();
return;
}
cookie.get("spread");
// this.toLaunch();
if (this.$deviceType == "app"||this.$deviceType == "h5") {
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();
this.$yrouter.switchTab({
path: "/pages/home/index"
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"
});
});
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"
});
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>

63
pages/home/components/Banner.vue
View File

@ -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);
},
// 路由跳转

1
pages/home/components/Live.vue
View File

@ -128,7 +128,6 @@
// }
},
goRoom(live) {
console.log(live.roomId,9999)
wx.navigateTo({
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${live.roomId}`
});

63
pages/home/index.vue
View File

@ -1,18 +1,26 @@
<template>
<view class="index">
<!-- 导航栏 -->
<view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">
<view class="cu-custom" :style="[{height:CustomBar+ 'px',}]">
<view class="cu-bar fixed" :style="customStyle" :class="[bgcolor]">
<view class="action">
<text class="nav-title Shop-selector-rect">{{ 'yshop商城' }}</text>
</view>
<view class="content" :style="[{top:StatusBar + 'px'}]">
<!-- <view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">-->
<!-- <view class="cu-custom" :style="[{height:CustomBar+ 'px',}]">-->
<!-- <view class="cu-bar fixed" :style="customStyle" :class="[bgcolor]">-->
<!-- <view class="action">-->
<!-- <text class="nav-title Shop-selector-rect">{{ 'yshop商城' }}</text>-->
<!-- </view>-->
<!-- <view class="content" :style="[{top:StatusBar + 'px'}]">-->
</view>
</view>
</view>
</view>
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<view class="head_box " :style="{ background: bgcolor }" :class="{ active: bgcolor }">
<cu-custom :isBack="true" >
<block slot="backText">
<text class="nav-title shopro-selector-rect">{{ 'YSHOP商城' }}</text>
</block>
</cu-custom>
</view>
<view class="header header-search acea-row row-center-wrapper" :style="{ background: bgcolor }">
<view @click="goGoodSearch()" class="search acea-row row-middle">
<text class="iconfont icon-xiazai5"></text>
@ -22,7 +30,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 +223,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);
@ -380,24 +389,22 @@
}
}
.head_box {
position: relative;
z-index: 10;
width: 100%;
// background: #fff;
transition: all linear 0.3s;
.head_box {
width: 750rpx;
// background: #fff;
transition: all linear 0.3s;
/deep/.cuIcon-back {
display: none;
}
/deep/.cuIcon-back {
display: none;
}
.nav-title {
font-size: 38rpx;
font-family: PingFang SC;
font-weight: 500;
color: #fff;
}
}
.nav-title {
font-size: 38rpx;
font-family: PingFang SC;
font-weight: 500;
color: #fff;
}
}
.cu-bar.fixed {
position: fixed;