最近在做uni，网上找了一圈没发现比较全的uni的TabBar制作,想想，就自己搞个简单的，抛砖引玉了哈。

先说好，我用的vue2，vue3的话更简单，方法也差不多，就是语法有点不一样

TabBar

1.创项目

pass

2.建页面

pass

3.公共组件文档的创建

• 右击项目menu
• 点击新建 => 点击目录 => 输入 components
• 创建TabBar组件

4.路由

都知道HbuilderX的路由可以自动生成，这里就pass了

5.TabBar组件设计

就不分段截取了，直接梭哈

<template>
	<view class="tabbar">
		<router-link to="/pages/index/index">
			<div class="iconbox" :class="$route.path == '/pages/index/index' ? 'iconactive' : ''">
				<i class="iconfont icon-shujiashugui "></i>
				<span>首页</span>
			</div>
		</router-link>
		<router-link to="/pages/hot/hot">
			<div class="iconbox" :class="$route.path == '/pages/hot/hot' ? 'iconactive' : ''">
				<i class="iconfont icon-paihangbang"></i>
				<span>排行</span>
			</div>
		</router-link>
		<router-link to="/pages/mysterious/mysterious">
			<div class="textbox">
				<span>神秘<br>入口</span>
			</div>
		</router-link>
		<router-link to="/pages/contact/contact">
			<div class="iconbox" :class="$route.path == '/pages/contact/contact' ? 'iconactive' : ''">
				<i class="iconfont icon-guanzhu"></i>
				<span>发现</span>
			</div>
		</router-link>
		<router-link to="/pages/mine/mine">
			<div class="iconbox" :class="$route.path == '/pages/mine/mine' ? 'iconactive' : ''">
				<i class="iconfont icon-wode"></i>
				<span>我的</span>
			</div>
		</router-link>
	</view>
</template>

<script>
	export default {
		name: "TabBar",
		data() {
			return {

			};
		}
	}
</script>

<style lang="less">
	.tabbar {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 50px;
		box-shadow: 0 0 10px 0 #888;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;

		a {
			width: 16%;
		}
	}

	a {
		text-decoration: none;
	}

	.iconbox {
		height: 50px;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #bbb;

		i {
			font-size: 30px;

		}

		span {
			font-size: 14px;

		}
	}

	.textbox {
		position: absolute;
		top: -10px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		font-size: 5px;
		background-color: #30ae9a;
		
		display: flex;
		justify-content: center;
		align-items: center;
		
		color: #fff;
		font-weight: bold;
		box-shadow: 0 0 20px 0 #30ae9a;

	}

	.iconactive {
		color: #30ae9a !important;
	}
</style>

icon 用的是 阿里的iconfont本地方法

你要用的话还需要把css导入到main.js(按你自己的文件存储位置放哈，我这是个案例)

import "assets/icon/iconfont.css"

6.引入Tabbar

<template>
	<view>
		<h1>这里是首页</h1>
		<TabBar></TabBar>
	</view>
</template>

<script>
import TabBarVue from '../../components/TabBar/TabBar.vue'
	export default {
		data() {
			return {
				
			}
		},
		components(){
			TabBarVue
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

注：你要是vue3 的话，注册就提到外面去

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TabBarVue from '../../components/TabBar/TabBar.vue'

@Component({
  components: {
    TabBarVue
  },
})
export default class extends Vue {}
</script>

记得在components里面注册

还有一件事，记得每个要用的页面都引入一次！！！