uniapp 配置 底部 TabBar

前言：写代码是需要团队的，需要跟更厉害的代码高手共同维护项目，需要一个环境，而我现在的环境利于我Vue技术的成长，从而我现在将react 技术搁置。

一、配置TabBar的方式

学习的重要途经就是查官网，所以，我直接登陆uniapp官网，并在其中搜索 tabBar组件，找到了它在package.json的配置方式，经过测试调整，成功显示。

 二、代码实践如下

逻辑思路：

（1）在package.json这个全局文件中，添加配置项（官网有例子）

（2）之后，需要在package.json的里面的pages选项上，也要添加tabBar组件的路径

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "分享"
			}
		},
		{
			"path": "pages/read/read",
			"style": {
				"navigationBarTitleText": "阅读"
			}
		},
		{
			"path": "pages/mine/mine",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}
	],

"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [
			{
				"pagePath": "pages/index/index",
				"iconPath": "static/bottomTabBar/home2_icon.png",
				"selectedIconPath": "static/bottomTabBar/home1_icon.png",
				"text": "分享"
		},
		{
			"pagePath": "pages/read/read",
			"iconPath": "static/bottomTabBar/readTrain2_icon.png",
			"selectedIconPath": "static/bottomTabBar/readTrain1_icon.png",
			"text": "阅读"
		}, {
			"pagePath": "pages/mine/mine",
			"iconPath": "static/bottomTabBar/mine2_icon.png",
			"selectedIconPath": "static/bottomTabBar/mine1_icon.png",
			"text": "我的"
		}]
	}

注意：我右键、弹出的菜单，点击“新建页面”，就会一下，建个同名文件夹和同名文件

三、添加登陆页

思路很简单，在pages.json添加login路由，并把它放在第一个位置上

"pages": [ //pages数组中第一项表示应用启动页
		{
		    "path" : "pages/login/login",
		    "style": {
				"navigationStyle": "custom"
			}
		    
		},

1. 从登录页 跳转到 tabBar

	uni.switchTab({
        //页面路径
		url: '/pages/index/index'
	});

2. 在uniapp的样式单位

使用的是rpx，这是微信小程序适配单位，设计稿以iphone6为标准，目前15rpx=15px

3. 去掉原生导航栏

如图：就是最上面的那部分

 添加代码如下：在pages.json的pages文件中

 "style": {
				"navigationStyle": "custom"
	}

4. 页面内容覆盖了手机顶部的状态栏

如下图：可以看到手机顶部的时间 和 电量都有被遮挡

 产生这样情况的原因是，窗体为沉浸式，解决办法1，不用沉浸式 ，解决办法2，加一个view 设置状态栏的高度。方法1更好，但是我目前没找到，暂用方法2

<view class="status_bar"></view>
.status_bar{
	height: var(--status-bar-height);
	width: 100%;
}