- 在公共组件components 建立my-tabbar.vue
-
<template> <view class="tabbar-container"> <block> <view class="tabbar-item" v-for="(item,index) in tabbarList" :key="index" :class="[item.centerItem ? ' center-item' : '']" @click="changeItem(item)"> <view class="item-top"> <image :src="currentItem==item.id?item.selectedIconPath:item.iconPath"></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", iconPath: "../static/images/tabbar/home-1.png", selectedIconPath: "../static/images/tabbar/home-2.png", text: "首页", centerItem: false }, { id: 1, path: "/pages/dynamic/dynamic", iconPath: "../static/images/tabbar/lvyou-1.png", selectedIconPath: "../static/images/tabbar/lvyou-2.png", text: "动态", centerItem: false }, { id: 2, path: "/pages/release/release", iconPath: "../static/images/tabbar/release-friends.png", selectedIconPath: "../static/images/tabbar/release-trip.png", text: "发布", centerItem: true }, { id: 3, path: "/pages/friend/friend", iconPath: "../static/images/tabbar/maket-1.png", selectedIconPath: "../static/images/tabbar/maket-2.png", text: "朋友", centerItem: false }, { id: 4, path: "/pages/mine/mine", iconPath: "../static/images/tabbar/me-1.png", selectedIconPath: "../static/images/tabbar/me-2.png", text: "我的", centerItem: false }], }; }, mounted() { this.currentItem = this.currentPage; uni.hideTabBar(); }, methods: { changeItem(item) { let _this = this; //_this.currentItem = item.id; uni.switchTab({ url: 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: 0 0 5px #999; */ border-top: 1px solid #4CD964; display: flex; align-items: center; padding: 5rpx 0; color: #999999; } .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: #66CCFF; } .tabbar-container .center-item { display: block; position: relative; } .tabbar-container .tabbar-item .item-top { width: 70rpx; height: 70rpx; padding: 10rpx; } .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: 0 0 5px #999; background-color: #ffffff; } .tabbar-container .tabbar-item .item-top image { width: 100%; height: 100%; } .tabbar-container .tabbar-item .item-bottom { font-size: 28rpx; width: 100%; } .tabbar-container .center-item .item-bottom { position: absolute; bottom: 5rpx; } /* 适配iphonex 有底部横条的 */ @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { .tabbar-container { bottom: constant(safe-area-inset-bottom); bottom: env(safe-area-inset-bottom); } } </style>
3.在 page.json 写入 tabBar
{ "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/dynamic/dynamic", "style": { "navigationBarTitleText": "发现" } }, { "path": "pages/release/release", "style": { "navigationBarTitleText": "发布" } }, { "path": "pages/friend/friend", "style": { "navigationBarTitleText": "朋友" } }, { "path": "pages/mine/mine", "style": { "navigationBarTitleText": "我的" } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" }, "tabBar": { "color": "#999999", "selectedColor": "#66CCFF", "borderStyle": "black", "backgroundColor": "#ffffff", "midButton": { "text": "发布", "pagePath": "pages/release/release", "iconPath": "static/images/tabbar/release-friends.png", "selectedIconPath": "static/images/tabbar/release-trip.png" }, "list": [{ "pagePath": "pages/index/index", "iconPath": "static/images/tabbar/home-1.png", "selectedIconPath": "static/images/tabbar/home-2.png", "text": "首页" }, { "pagePath": "pages/dynamic/dynamic", "iconPath": "static/images/tabbar/lvyou-1.png", "selectedIconPath": "static/images/tabbar/lvyou-2.png", "text": "发现" }, // #ifndef APP-PLUS { "pagePath": "pages/release/release", "iconPath": "static/images/tabbar/release-friends.png", "selectedIconPath": "static/images/tabbar/release-trip.png", "text": "发布" }, // #endif { "pagePath": "pages/friend/friend", "iconPath": "static/images/tabbar/maket-1.png", "selectedIconPath": "static/images/tabbar/maket-2.png", "text": "朋友" }, { "pagePath": "pages/mine/mine", "iconPath": "static/images/tabbar/me-1.png", "selectedIconPath": "static/images/tabbar/me-2.png", "text": "我的" } ] } }
4.在页面里面加入 <my-tabbar :current-page="0"></my-tabbar>current-page="0" 与 tabberlist 里面的id相对应
5.main.js
import myTabbar from './components/my-tabbar.vue'
//注册全局组件
Vue.component('my-tabbar', myTabbar);
App.mpType = 'app'