Skip to content

J
jz_Travel
Commit eba58ed8 authored by 罗超's avatar 罗超
Browse files
Options

优化

parent cca67d1c
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 184 additions and 1441 deletions
components/tabbar/index.vue
View file @ eba58ed8
<style scoped>
.tabbarMain {
height: 100upx;
position: fixed;
z-index: 50;
flex: 1;
bottom: 0;
left: 0;
right: 0;
z-index: 99999999;
border-top: 1upx solid #ddd;
padding-top: 96rpx;
background: #fff;
}
.tabbarMainIphone {
height: 156upx;
padding-bottom: 64upx;
}
.tabBtnMina {
width: 750upx;
height: 88upx;
position: absolute;
z-index: 2;
bottom: 0;
flex-direction: row;
display: flex;
left: 0;
right: 0;
z-index: 99999999;
}
.tabBtnMinaIphone {
height: 156upx;
padding-bottom: 64upx;
}
.imgse {
height: 48upx;
width: 48upx;
}
.txtBtn {
font-size: 24upx;
color: #666666;
}
.txtBtnSel {
font-size: 24upx;
color: #333333;
}
.itmMain {
width: 150upx;
flex: 1;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column;
}
.imgseTs {
width: 150upx;
height: 140upx;
margin-bottom: 90upx;
position: relative;
z-index: 1;
bottom: 0upx;
}
.btnfixMin {
width: 750upx;
height: 178upx;
position: absolute;
z-index: 1;
bottom: 0;
}
.btnfixMinIphone {
bottom: 64upx;
}
.fixTpm {
width: 150upx;
height: 140upx;
flex-direction: row;
justify-content: center;
align-items: center;
position: relative;
z-index: 0;
}
.imgseTsAnds {
width: 150upx;
height: 150upx;
position: fixed;
z-index: 1;
bottom: 10upx;
border-radius: 150upx;
}
</style>
<template>
<view
class="tabbarMain bar-box"
:class="[flagTypeInfo ? 'tabbarMainIphone' : '']"
v-if="navs && navs.length > 0"
>
<view
class="tabBtnMina"
:class="[flagTypeInfo ? 'tabBtnMinaIphone' : '']"
mode=""
>
<view
class="itmMain"
v-for="(x, i) in navs"
:key="i"
<view class="tabbarMain" :style="{paddingBottom: `${bottomSafeHeight}px`}" v-if="navs.length">
<view class="tabBtnMina">
<view
class="itmMain"
v-for="(x, i) in navs"
:key="i"
@click.stop="goUrl(x.url)"
>
<image
class="imgse"
:fade-show="false"
v-if="active != i"
:src="active === i ? x.active_icon : x.icon"
mode="aspectFit"
:src="x.icon"
></image>
<image
class="imgse"
:fade-show="false"
v-if="active === i"
mode="aspectFit"
:src="x.active_icon"
></image>
<text
class="txtBtn"
:style="{ color: active == i ? x.active_color : x.color }"
>{{ x.text }}</text
>
/>
<text class="txtBtn" :style="{ color: active == i ? x.active_color : x.color }">
{{ x.text }}
</text>
</view>
</view>
</view>
</template>
</template>
<script>
export default {
data() {
return {
active: 0,
platforms: "",
leftWidth: 0,
flagTypeInfo: false,
navs: [],
crtPath: "",
bottomSafeHeight: 0,
currentPath:''
};
},
created() {
},
mounted() {
this.flagTypeInfo = this.$uiConfig.is_bang;
let tempSystem = uni.getSystemInfoSync();
this.platforms = tempSystem.platform;
this.$nextTick(() => {
// #ifdef APP-NVUE || APP-PLUS || APP-PLUS-NVUE ||APP-VUE
if (this.platforms == "android") {
let temp = this.$refs.leftWidth;
this.leftWidth = tempSystem.screenWidth / 2;
}
// #endif
});
if (uni.getStorageSync("navs")) {
this.navs = uni.getStorageSync("navs") ?? [];
} else {
setTimeout(() => {
this.navs = uni.getStorageSync("navs") ?? [];
this.activeHandler();
}, 3000);
}
this.activeHandler();
this.navs = uni.getStorageSync("navs") || []
this.calcSafeArea()
this.activeHandler()
},
methods: {
calcSafeArea() {
const { safeAreaInsets } = uni.getSystemInfoSync()
this.bottomSafeHeight = safeAreaInsets.bottom > 0 ? safeAreaInsets.bottom : 10
},
activeHandler() {
let t = getCurrentPages();
// #ifdef MP-WEIXIN
let query = t[t.length - 1].__displayReporter.query;
let queryString = "";
for (var k in query) {
queryString += `&${k}=${query[k]}`;
}
if (queryString != "") {
queryString = "?" + queryString.substring(1, queryString.length);
}
this.crtPath = "/" + t[t.length - 1].route + queryString;
// #endif
// #ifdef MP-ALIPAY
this.crtPath = t[t.length - 1].$page.fullPath;
// #endif
this.navs.forEach((x, i) => {
if (x.url == this.crtPath) {
this.active = i;
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
const query = currentPage.options
const queryString = Object.keys(query)
.map(key => `${key}=${query[key]}`)
.join('&')
this.currentPath = `/${currentPage.route}${queryString ? '?' + queryString : ''}`
this.navs.forEach((item, index) => {
if (this.currentPath === item.url) {
this.active = index
}
});
})
},
goUrl(url) {
if (this.crtPath != url) {
uni.redirectTo({
url: url,
});
if (this.currentPath !== url) {
uni.redirectTo({ url })
} else {
uni.reLaunch({
url: url,
});
}
},
},
};
uni.reLaunch({
url
})
}
}
}
}
</script>
<!-- <template>
<view class="bar-box">
<div class="bar-box-line">
<view class="bar-item" v-for="(x,i) in menus" @click="changeMenuHandler(x)">
<i class="icon iconfont" :class="[x.icon]" v-if="current != x.page"></i>
<view class="acitve" v-else>
{{x.name}}
</view>
</view>
</div>
</view>
</template>
<script>
export default {
data() {
return {
menus: [],
current: ''
};
},
mounted() {
let pages = getCurrentPages()
this.current = "/" + pages[pages.length - 1].route ? ? ''
this.menus = [{
name: '首页',
icon: 'icon-home',
page: '/pages/index/index'
},
{
name: '订单',
icon: 'icon-Work',
page: '/pages/jiuzhai/jz_MyOrder'
},
{
name: '我的',
icon: 'icon-my1',
page: '/pages/user-center/user-center'
}
]
},
methods: {
changeMenuHandler(menu) {
this.current = menu.page
if (menu.page.indexOf('pages') != -1) {
uni.redirectTo({
url: menu.page
})
}
}
}
}
</script>
-->
<style>
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
font-family: "nav-font";
src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/tcIItWsk6dTo.woff2") format("woff2"),
url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/RZzswoFvsjUs.woff") format("woff");
font-display: swap;
}
.bar-box {
padding-bottom: env(safe-area-inset-bottom);
background-color: #FFF;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
box-shadow: 0 0 6px rgba(0, 0, 0, .12);
position: fixed;
z-index: 50;
flex: 1;
bottom: 0;
left: 0;
right: 0;
z-index: 99999999;
}
.bar-box-line {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
padding: 20upx 0 30upx;
}
.bar-box-line.uninset {
padding: 20upx 0 40upx;
}
.tabbarMain {
position: fixed;
z-index: 999;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1rpx solid #E0E0E0;
padding: 20rpx 0 0;
}
.bar-box-line.inset {
padding: 20upx 0;
}
.tabBtnMina {
display: flex;
flex-direction: row;
}
.bar-box-line .bar-item {
flex: 1;
width: 1px;
text-align: center;
color: #abadb9;
position: relative;
}
.itmMain {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.bar-box-line .bar-item .icon {
font-size: 50rpx;
}
.imgse {
width: 48rpx;
height: 48rpx;
}
.bar-box-line .bar-item .acitve {
font-size: 32rpx;
font-weight: bold;
color: #1F2429;
text-align: center;
font-family: nav-font;
}
.txtBtn {
font-size: 20rpx;
color: #666;
margin-top: 8rpx;
line-height: 1;
}
.bar-box-line .bar-item .acitve::after {
display: inline-block;
content: ' ';
width: 4px;
height: 4px;
border-radius: 4px;
background-color: #1F2429;
position: absolute;
left: calc(50% - 2px);
top: 60rpx;
}
</style>
.txtBtnSel {
color: #333;
font-size: 24rpx;
}
</style>
\ No newline at end of file
pages/index/index.vue
View file @ eba58ed8
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment