uni-app中底部导航的实现

参考官方文档：https://uniapp.dcloud.io/collocation/pages?id=tabbar

tabBar

tabBar 用来配置导航栏的表现，以及导航切换时显示的对应页。

属性说明：

属性	类型	必填	默认值	描述	平台差异说明
color	HexColor	是		tab 上的文字默认颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar 上边框的颜色，可选值 black/white	App 2.3.4+ 支持其他颜色值
blurEffect	String	否	none	iOS 高斯模糊效果，可选值 dark/extralight/light/none（参考:使用说明）	App 2.4.0+ 支持
list	Array	是		tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
position	String	否		bottom 可选值 bottom、top top 值	仅微信小程序支持
fontSize	String	否	10px	文字默认大小	App 2.3.4+
iconWidth	String	否	24px	图标默认宽度（高度等比例缩放）	App 2.3.4+
spacing	String	否	3px	图标和文字的间距	App 2.3.4+
height	String	否	50px	tabBar 默认高度	App 2.3.4+
midButton	Object	否		中间按钮 仅在 list 项为偶数时有效	App 2.3.4+

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

属性	类型	必填	说明
pagePath	String	是	页面路径，必须在 pages 中先定义
text	String	是	tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPath	String	否	图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片，不支持字体图标
selectedIconPath	String	否	选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

midButton 属性说明

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

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

注意

• 当设置 position 为 top 时，表示导航栏在顶部，将不会显示 icon
• tabBar 中的 list是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
• tabbar切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
• tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar页面，只会触发每个页面的onShow，不会再触发onLoad。
• 顶部的 tabbar目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。

pages.json代码示例：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				//"navigationBarTitleText": "uni-app"
			}
		}
        ,{
            "path" : "pages/news/news",
            "style" : {}
        }
        ,{
            "path" : "pages/messages/messages",
            "style" : {}
        }
        ,{
            "path" : "pages/home/home",
            "style" : {}
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "社交app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar":{
		"color":"#ADADAD",
		"selectedColor":"#FEE42B",
		"borderStyle":"black",
		"backgroundColor":"#FFFFFF",
		"list":[
			{
				"pagePath":"pages/index/index",
				"text":"首页",
				"iconPath":"static/tabbar/index.png",
				"selectedIconPath":"static/tabbar/indexed.png"
			},
			{
				"pagePath":"pages/news/news",
				"text":"动态",
				"iconPath":"static/tabbar/news.png",
				"selectedIconPath":"static/tabbar/newsed.png"
			},
			{
				"pagePath":"pages/messages/messages",
				"text":"消息",
				"iconPath":"static/tabbar/messages.png",
				"selectedIconPath":"static/tabbar/messagesed.png"
			},
			{
				"pagePath":"pages/home/home,
				",
				"text":"我的",
				"iconPath":"static/tabbar/home.png",
				"selectedIconPath":"static/tabbar/homeed.png"
			}
		]
	}
}

tabbar中的icon我是从阿里巴巴iconfont中下载的，不清楚的可以参考我另一篇博客uni-app引入自定义图标库——Iconfont-阿里巴巴，不同之处在于这里的图标不是用代码的方式，而是下载下来，存放在项目的static文件夹下面。
下载选中和未选中时的两种状态的颜色，下载方式：


下载后保存在项目的static目录下。

实现效果：