155 lines
4.3 KiB
Vue
155 lines
4.3 KiB
Vue
<template>
|
|
<view>
|
|
<view :class="[isFixed ? 'f-fixed' : '']">
|
|
<!-- 二次封装tabbar -->
|
|
<!-- @change="onTabbar" -->
|
|
<u-tabbar ref="tabBarRef" :value="tabIndex" @change="onTabbar" :fixed="false" :placeholder="false"
|
|
:safeAreaInsetBottom="safeAreaInsetBottom" :activeColor="activeColor || PrimaryColor"
|
|
:inactiveColor="inactiveColor" :border="border">
|
|
<!-- 将 list 改为 list -->
|
|
<block v-for="(item, index) in list" :key="item.name">
|
|
<!-- 自定义icon -->
|
|
<u-tabbar-item :text="item.name">
|
|
<view slot="active-icon">
|
|
<view class="iconfont2" :class="['custom-icon' + item.iconFill]" style="font-size: 20px;"
|
|
:style="{ color: activeColor || PrimaryColor }"></view>
|
|
<!-- 自定义图标 -->
|
|
<!-- <f-icon :name="item.iconFill" size="40" :color="activeColor || PrimaryColor"></f-icon> -->
|
|
<!-- 图片路径 -->
|
|
<!-- <image class="icon" :src="item.iconFill"></image> -->
|
|
</view>
|
|
|
|
<view slot="inactive-icon">
|
|
<view class="iconfont2" :class="['custom-icon' + item.icon]" style="font-size: 20px;"
|
|
:style="{ color: inactiveColor }"></view>
|
|
<!-- 自定义图标 -->
|
|
<!-- <f-icon :name="item.icon" size="40" :color="inactiveColor"></f-icon> -->
|
|
<!-- 图片路径 -->
|
|
<!-- <image class="icon" :src="item.icon"></image> -->
|
|
</view>
|
|
|
|
</u-tabbar-item>
|
|
</block>
|
|
</u-tabbar>
|
|
<!-- 苹果安全距离-默认20px -->
|
|
<view :style="{ paddingBottom: systemInfo.tabbarPaddingB + 'px', background: '#fff' }"></view>
|
|
</view>
|
|
<!-- 防止塌陷高度 -->
|
|
<view v-if="isFixed && isFillHeight" :style="{ height: systemInfo.tabbarH + 'px' }"></view>
|
|
<!-- #ifdef H5 -->
|
|
<u-safe-bottom></u-safe-bottom>
|
|
<!-- #endif -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapMutations, mapGetters } from 'vuex';
|
|
import base from '@/config/baseUrl.js';
|
|
export default {
|
|
name: 'f-tabbar',
|
|
props: {
|
|
// 是否固定在底部
|
|
isFixed: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 是否设置防止塌陷高度
|
|
isFillHeight: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 选中的颜色--为空显示主题色
|
|
activeColor: {
|
|
type: String,
|
|
default: '#0122c7'
|
|
},
|
|
// 未选中颜色
|
|
inactiveColor: {
|
|
type: String,
|
|
default: '#606266'
|
|
},
|
|
// 是否显示边框色
|
|
border: {
|
|
type: Boolean,
|
|
default: function() {
|
|
return true;
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
PrimaryColor: '#0122c7',
|
|
safeAreaInsetBottom: false,
|
|
systemInfo: base.systemInfo,
|
|
tabIndex: 0,
|
|
path: '', //当前路径
|
|
list: [{
|
|
name: '首页',
|
|
url: 'pages/views/oaHome/oaHome',
|
|
icon: 'oah',
|
|
iconFill: 'oaha'
|
|
},
|
|
{
|
|
name: '审批',
|
|
url: 'pages/views/oaExamine/oaExamine',
|
|
icon: 'oas',
|
|
iconFill: 'oasa'
|
|
},
|
|
{
|
|
name: '任务',
|
|
url: 'pages/views/oaTask/oaTask',
|
|
icon: 'oar',
|
|
iconFill: 'oara'
|
|
},
|
|
{
|
|
name: '我的',
|
|
url: 'pages/views/oaMy/oaMy',
|
|
icon: 'oamya',
|
|
iconFill: 'oamy'
|
|
}
|
|
]
|
|
};
|
|
},
|
|
created() {
|
|
//获取页面路径
|
|
let currentPages = getCurrentPages();
|
|
let page = currentPages[currentPages.length - 1];
|
|
this.path = page.route;
|
|
this.list.forEach((item, index) => {
|
|
if (this.path == item.url) {
|
|
this.tabIndex = index;
|
|
}
|
|
});
|
|
// #ifdef H5
|
|
this.safeAreaInsetBottom = true;
|
|
// #endif
|
|
},
|
|
methods: {
|
|
onTabbar(index) {
|
|
if (this.path !== this.list[index].url) {
|
|
uni.redirectTo({
|
|
url: '/' + this.list[index].url
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/static/tabbar_icon/iconfont.css';
|
|
|
|
.f-fixed {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1000;
|
|
|
|
.icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
</style>
|