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

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

  • [1. 创建页面](#1. 创建页面)
  • [2. pages.json](#2. pages.json)
  • [3. 自定义tabbar](#3. 自定义tabbar)
  • [4. 隐藏原生tabbar](#4. 隐藏原生tabbar)
  • [5. 全局注册组件](#5. 全局注册组件)
  • [6. 页面使用](#6. 页面使用)
  • [7. 效果图展示](#7. 效果图展示)

1. 创建页面

2. pages.json

配置tabbar

json 复制代码
{
	"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

html 复制代码
<!-- 自定义底部导航栏 -->
<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 H5
			uni.hideTabBar(); // 隐藏 tabBar 导航栏
			// #endif

			this.curItem = this.currPage; // 当前所选导航栏
		},
		methods: {
			/* 导航栏切换 */
			changeItem(e) {
				console.log('切换tab', e.pagePath)

				// #ifdef MP-WEIXIN
				uni.switchTab({
					url: e.pagePath,
					fail: function(error) {
						console.error("Failed to navigate:", error);
					}
				}); // 跳转到其他 tab 页面
				// #endif

				// #ifdef MP-ALIPAY
				uni.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

js 复制代码
		onLaunch: function() {
			console.log('App Launch')
			// #ifdef MP-ALIPAY
			uni.hideTabBar()
			// #endif

			// #ifdef MP-WEIXIN
			uni.hideTabBar()
			// #endif
		},

5. 全局注册组件

main.js

js 复制代码
import Vue from 'vue'
import './uni.promisify.adaptor'

6. 页面使用

html 复制代码
<template>
	<view class="common-containter">
		团课
		<custom-tabbar :curr-page="3" />
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">

</style>

7. 效果图展示

相关推荐
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
mosen8682 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
尚梦10 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
尚学教辅学习资料16 小时前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie23416 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
qq22951165021 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
qq22951165022 天前
微信小程序uniapp基于Android的流浪动物管理系统 70c3u
微信小程序·uni-app
qq22951165022 天前
微信小程序 uniapp+vue老年人身体监测系统 acyux
vue.js·微信小程序·uni-app
摇头的金丝猴2 天前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts
小远yyds2 天前
跨平台使用高德地图服务
前端·javascript·vue.js·小程序·uni-app