若依(ruoyi)RuoYiApp版—tabBar

1.tabBar简介

如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。

下面这个就是tabBar

在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在 App 和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待 js 引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生 tab。

比如下面这样：

关于tabBar的属性，常见的如下：

类型	必填	默认值	描述	平台差异说明
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar 上边框的颜色，可选值 black/white，black 对应颜色 rgba(0,0,0,0.33)，white 对应颜色 rgba(255,255,255,0.33)。	App 2.3.4+ 、H5 3.0.0+、微信小程序、小红书小程序
blurEffect	String	否	none	iOS 高斯模糊效果，可选值 dark/extralight/light/none（参考:使用说明）	App 2.4.0+ 支持、H5 3.0.0+（只有最新版浏览器才支持）
list	Array	是		tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position	String	否	bottom	可选值 bottom、top	top 值仅微信小程序支持
fontSize	String	否	10px	文字默认大小	App 2.3.4+、H5 3.0.0+
iconWidth	String	否	24px	图标默认宽度（高度等比例缩放）	App 2.3.4+、H5 3.0.0+
spacing	String	否	3px	图标和文字的间距	App 2.3.4+、H5 3.0.0+
height	String	否	50px	tabBar 默认高度	App 2.3.4+、H5 3.0.0+
midButton	Object	否		中间按钮 仅在 list 项为偶数时有效	App 2.3.4+、H5 3.0.0+
iconfontSrc	String	否		list 设置 iconfont 属性时，需要指定字体文件路径	App 3.4.4+、H5 3.5.3+
backgroundImage	String	否		设置背景图片,优先级高于 backgroundColor	App
backgroundRepeat	String	否		设置标题栏的背景图平铺方式，可取值：”repeat” – 背景图片在垂直方向和水平方向平铺；”repeat-x” – 背景图片在水平方向平铺，垂直方向拉伸；”repeat-y” – 背景图片在垂直方向平铺，水平方向拉伸；”no-repeat” – 背景图片在垂直方向和水平方向都拉伸。 默认使用 “no-repeat”	App
redDotColor	String	否		tabbar 上红点颜色	App

其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

属性	类型	必填	说明	平台差异
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPath	String	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px ，当 position 为 top 时，此参数无效
visible	Boolean	否	该项是否显示，默认显示	App (3.2.10+)、H5 (3.2.10+)
iconfont	Object	否	字体图标，优先级高于 iconPath	App（3.4.4+）、H5 (3.5.3+)

midButton 属性说明

属性	类型	必填	默认值	描述
width	String	否	80px	中间按钮的宽度，tabBar 其它项为减去此宽度后平分，默认值为与其它项平分宽度
height	String	否	50px	中间按钮的高度，可以大于 tabBar 高度，达到中间凸起的效果
text	String	否		中间按钮的文字
iconPath	String	否		中间按钮的图片路径
iconWidth	String	否	24px	图片宽度（高度等比例缩放）
backgroundImage	String	否		中间按钮的背景图片路径
iconfont	Object	否		字体图标，优先级高于 iconPath	App（3.4.4+）

midButton 没有 pagePath，需监听点击事件，自行处理点击后的行为逻辑。监听点击事件为调用 API：uni.onTabBarMidButtonTap，详见https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap

iconfont 参数说明：

属性	类型	说明
text	String	字库 Unicode 码
selectedText	String	选中后字库 Unicode 码
fontSize	String	字体图标字号(px)
color	String	字体图标颜色
selectedColor	String	字体图标选中颜色

2.如何新增一个tabBar

（1）先创建初始页面

我们右击pages文件夹，选择“新建”—>”目录”

然后新增一个文件夹，名字就叫”student”

继续右击刚才创建的”student”文件夹，选择”新建”—>”vue文件”

创建vue文件会出现以下提示，这里我们给要创建的vue文件起名为index

（注意：一般tabBar默认访问的页面都命名为index.vue）

创建完毕后，默认如下：

我们修改index.vue文件，参考代码如下：

<template>
	<view class="content">
	  <view class="text-area">
	    <text>这是Student中的index</text>
	  </view>
	</view>
</template>

<script>
	export default {
		onInit(){
			console.log("student/index页面"+"onInit")
		},	
	}
</script>

<style>
	.content {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	}
	.text-area {
	  display: flex;
	  justify-content: center;
	}
</style>

（2）新增页面路由

我们打开pages.json文件

在pages这个数组里面新增刚才我们页面的路由信息。

 {
	  "path": "pages/student/index",
	  "style": {
	    "navigationBarTitleText": "学生"
	  }
  },

修改完后，页面如下：

注意末尾的逗号。

（3）新增tabBar

新增的代码如下：

{
		  "pagePath": "pages/student/index",
		  "iconPath": "static/images/tabbar/work.png",
		  "selectedIconPath": "static/images/tabbar/work_.png",
		  "text": "学生"
	  }

新增后page.json如下：

3.查看效果

保存一下项目，就可以在浏览器中看到效果了。