You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
300 lines
6.7 KiB
Vue
300 lines
6.7 KiB
Vue
2 years ago
|
<template>
|
||
|
|
<view class="tarbar savepadding">
|
||
|
|
<view class="tarbar-list" :style="{
|
||
|
|
background: tabBar.backgroundColor,
|
||
|
|
color: tabBar.color,
|
||
|
|
'border-top': tabBar.position == 'bottom' ? '1rpx solid ' + tabBar.borderStyle : 0,
|
||
|
|
'border-bottom': tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0,
|
||
|
|
'padding-bottom': paddingHeight + 'px',
|
||
|
|
}">
|
||
|
|
<view class="tarbar-list-ul">
|
||
|
|
<view class="tarbar-list-li" :class="{'tarbar-list-li-center': item.type == 'center'}"
|
||
|
|
v-for="(item, index) in tabBar.list" :key="index" @click.top="setSelected(index)">
|
||
|
|
<block v-if=" item.type != 'center'">
|
||
|
|
<view class="tarbar-list-li-icon">
|
||
|
|
<text class="tab-icon iconfont active" :class="item.iconClick"
|
||
|
|
v-if="selected == index"></text>
|
||
|
|
<text class="tab-icon iconfont" :class="item.icon" v-else></text>
|
||
|
|
</view>
|
||
|
|
<view :style='selected == index?"color:"+tabBar.selectedColor:""' class="tarbar-list-li-name">
|
||
|
|
{{ item.text }}
|
||
|
|
</view>
|
||
|
|
</block>
|
||
|
|
<view class="center-box" v-else>
|
||
|
|
<view class="tarbar-list-li-icon">
|
||
|
|
<text class="tab-icon iconfont" :class="[item.icon ,{'active': selected == index }]"></text>
|
||
|
|
</view>
|
||
|
|
<view :style='selected == index?"color:"+tabBar.selectedColor:""' class="tarbar-list-li-name">
|
||
|
|
{{ item.text }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bg" v-if=" item.type == 'center'"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tabBar: {
|
||
|
|
color: '#999999',
|
||
|
|
selectedColor: '#FE7F00',
|
||
|
|
borderStyle: 'white',
|
||
|
|
backgroundColor: '#fff',
|
||
|
|
position: 'bottom',
|
||
|
|
list: [{
|
||
|
|
"type": 'normal',
|
||
|
|
"pagePath": "/pages/homePage/manifest/manifest",
|
||
|
|
"icon": 'icon-yunshu1',
|
||
|
|
"iconClick": 'icon-yunshugongsi',
|
||
|
|
"text": "航单",
|
||
|
|
"bgColor": '#ffffff',
|
||
|
|
"fontColor": '#333333',
|
||
|
|
"title": '航单',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"type": 'normal',
|
||
|
|
"pagePath": "/pages/homePage/moveTrace/moveTrace",
|
||
|
|
// "pagePath": "/pages/chatList/chatList",
|
||
|
|
"icon": "icon-yunshu1",
|
||
|
|
"iconClick": 'icon-yunshugongsi',
|
||
|
|
"text": "运踪",
|
||
|
|
"bgColor": '#ffffff',
|
||
|
|
"fontColor": '#333333',
|
||
|
|
"title": '运踪',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"type": 'center',
|
||
|
|
"pagePath": "/pages/home/home",
|
||
|
|
"icon": "icon-xinzeng",
|
||
|
|
"iconClick": 'icon-xinzeng',
|
||
|
|
"text": "首页",
|
||
|
|
"bgColor": '#2c96fb',
|
||
|
|
"fontColor": '#ffffff',
|
||
|
|
"title": '欢迎来到大简云',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"type": 'normal',
|
||
|
|
"pagePath": "/pages/homePage/vgm/vgm",
|
||
|
|
"icon": "icon-yunshu1",
|
||
|
|
"iconClick": 'icon-yunshugongsi',
|
||
|
|
"text": "VGM",
|
||
|
|
"bgColor": '#ffffff',
|
||
|
|
"fontColor": '#333333',
|
||
|
|
"title": '航单',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"type": 'normal',
|
||
|
|
"pagePath": "/pages/mine/mine",
|
||
|
|
"icon": "icon-yunshu1",
|
||
|
|
"iconClick": 'icon-yunshugongsi',
|
||
|
|
"text": "我的",
|
||
|
|
"bgColor": '#0e72f0',
|
||
|
|
"fontColor": '#ffffff',
|
||
|
|
"title": '个人中心',
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
selected: this.current, //当前激活项
|
||
|
|
paddingHeight: 0,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
current: {
|
||
|
|
// type: [Number, String],
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.paddingHeight = uni.getSystemInfoSync().safeArea.bottom - uni.getSystemInfoSync().safeArea.height - 20;
|
||
|
|
// this.paddingHeight = getApp().globalData.tabBarBottom;
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
setSelected1(index) {
|
||
|
|
if (this.selected == index) return
|
||
|
|
let pages = getCurrentPages();
|
||
|
|
let lastIndex = null;
|
||
|
|
pages.map((pItem, pIndex) => {
|
||
|
|
let page = pItem.$page.fullPath;
|
||
|
|
console.log(page, this.tabBar.list[index].pagePath, index)
|
||
|
|
if (page == this.tabBar.list[index].pagePath) {
|
||
|
|
console.log('=====切换======', page, this.tabBar.list[index].pagePath, index)
|
||
|
|
lastIndex = pIndex;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
console.log('==== 切换导航 ====', lastIndex)
|
||
|
|
if (lastIndex && pages[lastIndex].$page.fullPath == this.tabBar.list[index].pagePath) {
|
||
|
|
uni.navigateBack({
|
||
|
|
delta: -lastIndex
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: this.tabBar.list[index].pagePath,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
setSelected(index) {
|
||
|
|
if (this.selected == index) return
|
||
|
|
this.$emit('change', index)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
current: {
|
||
|
|
handler(val) {
|
||
|
|
this.selected = val
|
||
|
|
const _this = this
|
||
|
|
uni.setNavigationBarTitle({
|
||
|
|
title: _this.tabBar.list[val].title
|
||
|
|
})
|
||
|
|
uni.setNavigationBarColor({
|
||
|
|
frontColor: _this.tabBar.list[val].fontColor,
|
||
|
|
backgroundColor: _this.tabBar.list[val].bgColor,
|
||
|
|
animation: {
|
||
|
|
duration: 400,
|
||
|
|
timingFunc: 'easeIn'
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
},
|
||
|
|
immediate: true
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.tarbar {
|
||
|
|
width: 100%;
|
||
|
|
z-index: 9999;
|
||
|
|
position: fixed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tarbar-list {
|
||
|
|
width: 100%;
|
||
|
|
min-height: 110rpx;
|
||
|
|
/* padding-bottom: var(--status-bar-height); */
|
||
|
|
background: #4d586f;
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
animation-name: example;
|
||
|
|
animation-duration: .5s;
|
||
|
|
box-shadow: 0 0 30rpx #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes example {
|
||
|
|
from {
|
||
|
|
bottom: -100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
to {
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.tarbar-list-ul {
|
||
|
|
width: 100%;
|
||
|
|
height: 110rpx;
|
||
|
|
padding: 10rpx 46rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tarbar-list-li {
|
||
|
|
width: 80rpx;
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.tarbar-list-li-icon {
|
||
|
|
width: 50rpx;
|
||
|
|
height: 50rpx;
|
||
|
|
margin: 0 auto;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.tarbar-list-li-icon image {
|
||
|
|
width: 36rpx;
|
||
|
|
height: 36rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tarbar-list-li-icon .tab-icon {
|
||
|
|
font-size: 52rpx;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.tarbar-list-li-icon .active {
|
||
|
|
color: #FF5A23;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tarbar-list-li-name {
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 30rpx;
|
||
|
|
font-size: 22rpx;
|
||
|
|
height: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tarbar-list-li-center {
|
||
|
|
width: 100rpx;
|
||
|
|
background: #fff;
|
||
|
|
height: 100rpx;
|
||
|
|
margin-top: -28px;
|
||
|
|
border-radius: 50%;
|
||
|
|
position: relative;
|
||
|
|
box-shadow: 0 -10rpx 15rpx -5rpx #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-box {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100rpx;
|
||
|
|
height: 140rpx;
|
||
|
|
padding-top: 36rpx;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tarbar-list-li-center .bg {
|
||
|
|
position: absolute;
|
||
|
|
top: 23px;
|
||
|
|
left: -12px;
|
||
|
|
width: 150rpx;
|
||
|
|
height: 76rpx;
|
||
|
|
z-index: 0;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-box .tarbar-list-li-icon {
|
||
|
|
margin-bottom: 19rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.center-box .tarbar-list-li-icon .iconfont {
|
||
|
|
font-size: 76rpx;
|
||
|
|
margin-bottom: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* .savepadding{
|
||
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
||
|
|
box-sizing: content-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.savebottom{
|
||
|
|
bottom: constant(safe-area-inset-bottom);
|
||
|
|
bottom: env(safe-area-inset-bottom);
|
||
|
|
} */
|
||
|
|
</style>
|