uni-app - - - - - 自定义tabbar

1. 创建页面

2. pages.json

配置tabbar

{"tabBar": {"list": [{"pagePath": "pages/ballroom/ballroom","text": "球类房"},{"pagePath": "pages/gym/gym","text": "健身房"},{"pagePath": "pages/yoga-room/yoga-room","text": "瑜伽室"},{"pagePath": "pages/league-class/league-class","text": "团课"},{"pagePath": "pages/my-reservation/my-reservation","text": "我的预定"}]}
}

3. 自定义tabbar

<!-- 自定义底部导航栏 -->
<template><view class="tabbar-container" :style="{backgroundImage:'url('+bg+')'}"><!-- :style="['width: calc(100% /' + tabbar.length + ')']" --><view class="tabbar-item" :class="[item.centerItem ? ' center-item' : '']" @click="changeItem(item)"v-for="(item, i) in tabbar" :key="i"><view class="item-top"><image :src="curItem === item.id ? item.selectedIconPath : item.iconPath" /></view><view class="item-bottom" :class="[curItem === item.id ? 'item-active' : '']">{{ item.text }}</view></view></view>
</template><script>export default {props: {/* 当前导航栏 */currPage: {type: Number,default: 0}},data() {return {curItem: 0, // 当前所选导航栏bg: 'https://*******/tabbar-bg.jpg',tabbar: [{id: 0,pagePath: "/pages/ballroom/ballroom",text: "球类房",iconPath: '/static/tabbar-icon/ball.png',selectedIconPath: '/static/tabbar-icon/ball-actived.png',centerItem: false},{id: 1,pagePath: "/pages/gym/gym",text: "健身房",iconPath: '/static/tabbar-icon/gym.png',selectedIconPath: '/static/tabbar-icon/gym-actived.png',centerItem: false},{id: 2,pagePath: "/pages/yoga-room/yoga-room",text: "瑜伽室",iconPath: '/static/tabbar-icon/yoga.png',selectedIconPath: '/static/tabbar-icon/yoga-actived.png',centerItem: false},{id: 3,pagePath: "/pages/league-class/league-class",text: "团课",iconPath: '/static/tabbar-icon/league.png',selectedIconPath: '/static/tabbar-icon/league-actived.png',centerItem: false},{id: 4,pagePath: "/pages/my-reservation/my-reservation",text: "我的预定",iconPath: '/static/tabbar-icon/my-reservation.png',selectedIconPath: '/static/tabbar-icon/my-reservation-actived.png',centerItem: false}] // 导航栏列表};},mounted() {this.curItem = this.currPage; // 当前所选导航栏// #ifdef H5uni.hideTabBar(); // 隐藏 tabBar 导航栏// #endifthis.curItem = this.currPage; // 当前所选导航栏},methods: {/* 导航栏切换 */changeItem(e) {console.log('切换tab', e.pagePath)// #ifdef MP-WEIXINuni.switchTab({url: e.pagePath,fail: function(error) {console.error("Failed to navigate:", error);}}); // 跳转到其他 tab 页面// #endif// #ifdef MP-ALIPAYuni.switchTab({url: e.pagePath,fail: function(error) {console.error("Failed to navigate:", error);}}); // 跳转到其他 tab 页面// #endif}}};
</script><style lang="scss" scoped>$textDefaultColor: #999; // 文字默认颜色$bottomBg: #fff; // 底部背景$textSelectedColor: #E51717; // 文字选中颜色$centerItemBg: #fff; // 中间凸起按钮背景.tabbar-container {position: fixed;bottom: 0;left: 0;display: flex;width: 100%;height: 188rpx;color: $textDefaultColor;box-shadow: 0 0 10rpx #999;background-size: 100% 100%;background-color: #ccc;}.tabbar-item {display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;width: 150rpx;height: 120rpx;position: relative;.item-top {flex-shrink: 0;width: 150rpx;height: 120rpx;// background-color: aqua;// width: 65rpx;// height: 65rpx;// padding: 4rpx;image {width: 150rpx;height: 120rpx}}.item-bottom {width: 100%;font-size: 20rpx;position: absolute;bottom: 10rpx;}.item-active {color: $textSelectedColor;}}.center-item {position: relative;.item-top {position: absolute;top: -55rpx;left: 50%;transform: translateX(-50%);width: 105rpx;height: 105rpx;background-color: $centerItemBg;border-radius: 50%;}.item-bottom {position: absolute;bottom: 5rpx;}}
</style>

4. 隐藏原生tabbar

App.vue

		onLaunch: function() {console.log('App Launch')// #ifdef MP-ALIPAYuni.hideTabBar()// #endif// #ifdef MP-WEIXINuni.hideTabBar()// #endif},

5. 全局注册组件

main.js

import Vue from 'vue'
import './uni.promisify.adaptor'

6. 页面使用

<template><view class="common-containter">团课<custom-tabbar :curr-page="3" /></view>
</template><script>export default {data() {return {};}}
</script><style lang="scss"></style>

7. 效果图展示