uni-app 之 自定义 tabbar

前言

在 uViewUI 基础上，封装自己的组件。

1. 安装 uViewUI 。并且按照官网配置一下。注意 uviewUI 的版本，这里使用的是 uVIewUI2.x 版本。

备注：tabbar 组件内部的内容可以自定义，不一定使用 UI 框架。

1. 新建一个与 pages 文件夹同级的文件夹，叫做 components，存放公共组件

不完成文件夹结构

|- pages
|- components
|- static  // 存放需要被编译的静态资源		

2. 在 components 文件夹中新建 tabbar 组件

<template>
	<u-tabbar fixed :value="selected" @change="change1" activeColor="#ee0a24" :placeholder="false"
		:safeAreaInsetBottom="false">
		<u-tabbar-item v-for="(item,index) in tabbarList" :text="item.text" :key="index">
			<image class="tabbar-icon" slot="active-icon" :src="item.selectedIconPath"></image>
			<image class="tabbar-icon" slot="inactive-icon" :src="item.iconPath"></image>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
	export default {
		name: "tab-bar",
		props: {
			selected: {
				type: Number
			}
		},
		data() {
			return {
				tabbarList: [{
					pagePath: '/pages/home/home',
					text: '首页',
					iconPath: '../../static/images/_home.png',
					selectedIconPath: '../../static/images/home.png'
				}, {
					pagePath: '/pages/category/category',
					text: '分类',
					iconPath: '../../static/images/_category.png',
					selectedIconPath: '../../static/images/category.png'
				}, {
					pagePath: '/pages/cart/cart',
					text: '购物车',
					iconPath: '../../static/images/_cart.png',
					selectedIconPath: '../../static/images/cart.png'
				}, {
					pagePath: '/pages/center/center',
					text: '我的',
					iconPath: '../../static/images/_mine.png',
					selectedIconPath: '../../static/images/mine.png'
				}]
			};
		},
		methods: {
			change1(val) {
                // 因为在pages中配置了需要跳转的页面为 tabbar页面 
               // 所以不能使用navigateTo 只能使用下面这个方法跳转。
				uni.switchTab({
					url: this.tabbarList[val].pagePath
				})
			}
		}
	}
</script>

<style lang="scss">
	.tabbar-icon {
		height: 50rpx;
		width: 50rpx;
		padding: 6rpx;
	}
</style>

3. 去 pages.json 配置一下，那些页面是 tabbar 的页面。并且去 app.vue 文件中，隐藏原生的tabbar

1. pages.json 的配置

...
"tabBar": {
		"color": "#8a8a8a",
		"selectedColor": "#ee0a24",
		"list": [{
			"pagePath": "pages/home/home",
			"text": "首页",
			"iconPath": "./static/images/_home.png",
			"selectedIconPath": "./static/images/home.png"
		}, {
			"pagePath": "pages/category/category",
			"text": "分类",
			"iconPath": "./static/images/_category.png",
			"selectedIconPath": "./static/images/category.png"
		}, {
			"pagePath": "pages/cart/cart",
			"text": "购物车",
			"iconPath": "./static/images/_cart.png",
			"selectedIconPath": "./static/images/cart.png"
		}, {
			"pagePath": "pages/center/center",
			"text": "我的",
			"iconPath": "./static/images/_mine.png",
			"selectedIconPath": "./static/images/mine.png"
		}]
	}

1. 根组件 app.vue 的配置

   完整的根组件

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
			uni.hideTabBar()
		},
		onShow: function() {
			console.log('App Show')
			uni.hideTabBar()
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import "@/uni_modules/uview-ui/index.scss";
</style>

4. 去每个 tabbar 页面（tabbar 页面就是在pages.json 中配置的那些页面）中引入 tabbar 组件。

这里仅演示 home 页面的引入。

<template>
	<view class="home">
        <!--  tabbar 组件 -->
		<tab-bar :selected="selected"></tab-bar>
	</view>
</template>
<script>
	import TabBar from "@/components/tab-bar/tab-bar.vue"
	export default {
		data() {
			return {
                // 选中的 tabbar
				selected: 0,
			}
		}
	}
</script>
<style lang="scss">
	.home {
	}
</style>