一、效果展示：
二、代码实现：
1.首先在pages.json文件中进行tabbar的样式和列表配置，代码如下：
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path": "pages/todo/todo",
"style": {
"navigationBarTitleText": "uni-app"
}
},{
"path": "pages/workBench/workBench",
"style": {
"navigationBarTitleText": "uni-app"
}
},{
"path": "pages/contacts/contacts",
"style": {
"navigationBarTitleText": "uni-app"
}
},{
"path": "pages/my/my",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"tabBar": {
"color": "#B6C3D2",
"selectedColor": "#2B2E3D",
"borderStyle": "black",
"backgroundColor": "#FFFFFF",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/index01.png",
"selectedIconPath": "static/index02.png",
"text": "首页"
},
{
"pagePath": "pages/todo/todo",
"iconPath": "static/dd01.png",
"selectedIconPath": "static/dd02.png",
"text": "订单1"
},
{
"pagePath": "pages/workBench/workBench",
"iconPath": "static/shop01.png",
"selectedIconPath": "static/shop02.png",
"text": "店铺"
},
{
"pagePath": "pages/contacts/contacts",
"iconPath": "static/dd01.png",
"selectedIconPath": "static/dd02.png",
"text": "订单2"
},
{
"pagePath": "pages/my/my",
"iconPath": "static/my01.png",
"selectedIconPath": "static/my02.png",
"text": "我的"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {
}
}
2.在components文件中封装一个Tabbar 组件，命名为TabBar.vue 代码如下：
<template>
<view class="tabbar-container">
<block>
<view class="tabbar-item" v-for="(item,index) in tabbarList"
:class="[item.centerItem ? ' center-item' : '']" @click="changeItem(item)">
<view class="item-top">
<image :src="currentItem==item.id?item.selectIcon:item.icon"></image>
</view>
<view class="item-bottom" :class="[currentItem==item.id ? 'item-active' : '']">
<text>{
{
item.text}}</text>
</view>
</view>
</block>
</view>
</template>
<script>
export default {
props: {
currentPage: {
type: Number,
default: 0
}
},
data() {
return {
currentItem: 0,
tabbarList: [{
id: 0,
path: "/pages/index/index",
icon: "/static/index01.png",
selectIcon: "/static/index02.png",
text: "首页",
centerItem: false
}, {
id: 1,
path: "/pages/todo/todo",
icon: "/static/dd01.png",
selectIcon: "/static/dd02.png",
text: "订单1",
centerItem: false
}, {
id: 2,
path: "/pages/workBench/workBench",
icon: "/static/shop01.png",
selectIcon: "/static/shop02.png",
text: "店铺",
centerItem: true
}, {
id: 3,
path: "/pages/contacts/contacts",
icon: "/static/dd01.png",
selectIcon: "/static/dd02.png",
text: "订单2",
centerItem: false
}, {
id: 4,
path: "/pages/mine/mine",
icon: "/static/my01.png",
selectIcon: "/static/my02.png",
text: "我的",
centerItem: false
}]
};
},
mounted() {
this.currentItem = this.currentPage;
uni.hideTabBar();
},
methods: {
changeItem(item) {
let _this = this;
uni.switchTab({
url: item.path
});
console.log(item.path)
}
}
}
</script>
<style>
view {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.tabbar-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 110rpx;
box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.16);
border-top: 1px;
display: flex;
align-items: center;
padding: 5rpx 0;
color: #999999;
z-index: 200;
background-color: #fff;
}
.tabbar-container .tabbar-item {
width: 20%;
height: 100rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.tabbar-container .item-active {
color: #1AD080;
}
.tabbar-container .center-item {
display: block;
position: relative;
}
.tabbar-container .tabbar-item .item-top {
width: 54rpx;
height: 54rpx;
padding: 0rpx;
}
.tabbar-container .center-item .item-top {
flex-shrink: 0;
width: 100rpx;
height: 100rpx;
position: absolute;
top: -50rpx;
left: calc(50% - 50rpx);
border-radius: 50%;
box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.16);
background-color: #ffffff;
padding: 10rpx;
}
.tabbar-container .tabbar-item .item-top image {
width: 100%;
height: 100%;
}
tabbar-container .tabbar-item:nth-child(3) .item-top image {
background: #ff0000;
}
.tabbar-container .tabbar-item .item-bottom {
font-size: 28rpx;
width: 100%;
}
.tabbar-container .center-item .item-bottom {
position: absolute;
bottom: 5rpx;
}
</style>
3.在mian.js 全局注册组件
import TabBar from "./components/TabBar.vue"
Vue.component('TabBar', TabBar);
4.在页面中使用组件
<TabBar :current-page="0" />
完成~