3.使用uView让tabbar更优雅

1. 使用uView让tabbar更优雅

1.1. 怎么才优雅？

为什么要做这个呢？起因还是因为我们自己做的tabbar都平平淡淡，没什么特色，然而，我们有时候看到有的小程序的tabbar，中间突出很大一块，是怎么做到的呢？

1.2. uView的tabbar合适吗？

• tabbar底部导航栏：https://vkuviewdoc.fsq.pub/components/tabbar.html
• 对应的demo：https://vkuviewdoc.fsq.pub/components/resource.html

动手下载运行起来看看效果：

效果还是非常好的，那就开始搞吧

1.3. 引入项目过程

1.3.1. 修改pages.json

主要就是改pages配置，把tabbar定义一下

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		// {
		// 	"path": "pages/index/index",
		// 	"style": {
		// 		"navigationBarTitleText": "uni-app"
		// 	}
		// }
		// uView的自定义tabbar demo
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uView UI"
			}
		},
		{
			"path": "pages/js/index",
			"style": {
				"navigationBarTitleText": "工具"
			}
		},
		{
			"path": "pages/template/index",
			"style": {
				"navigationBarTitleText": "模板"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {},
	// uView的自定义tabbar demo，定义tabbar
	"tabBar": {
		"color": "#909399",
		"selectedColor": "#303133",
		"backgroundColor": "#FFFFFF",
		"borderStyle": "black",
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/uview/example/component.png",
				"selectedIconPath": "static/uview/example/component_select.png",
				"text": "组件"
			},
			{
				"pagePath": "pages/js/index",
				"iconPath": "static/uview/example/js.png",
				"selectedIconPath": "static/uview/example/js_select.png",
				"text": "工具"
			},
			{
				"pagePath": "pages/template/index",
				"iconPath": "static/uview/example/template.png",
				"selectedIconPath": "static/uview/example/template_select.png",
				"text": "模板"
			}
		]
	}
}

1.3.2. 把demo里面的pages先拷贝过来

先拷贝，后面再删，主要是先运行起来。

其实也就是拷贝了3个文件，也没什么特别，好操作。

1.3.3. 引入tabbar的图片

同样，还是先拷贝过来，后面会改成我们自己的tabbar的图标。

把demo里的static/uview文件夹都拷贝过来。

1.3.4. 运行

就这么多，运行起来就是那样的效果：

1.4. 我们自己的项目适配

还是按照之前的套路：

1. pages.json修改

   {
   	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
   		{
   			"path": "pages/bill_add/bill_add",
   			"style": {
   				"navigationBarTitleText": "记一笔"
   			}
   		},
   		{
   			"path": "pages/bill_list/bill_list",
   			"style": {
   				"navigationBarTitleText": "账单"
   			}
   		},
   		{
   			"path": "pages/bill_chat/bill_chat",
   			"style": {
   				"navigationBarTitleText": "图表"
   			}
   		},
   		{
   			"path": "pages/bill_detail/bill_detail",
   			"style": {
   				"navigationBarTitleText": "明细"
   			}
   		},
   		{
   			"path": "pages/my/my",
   			"style": {
   				"navigationBarTitleText": "我的"
   			}
   		}
   	],
   	"globalStyle": {
   		"navigationBarTextStyle": "black",
   		"navigationBarTitleText": "uni-app",
   		"navigationBarBackgroundColor": "#F8F8F8",
   		"backgroundColor": "#F8F8F8"
   	},
   	"uniIdRouter": {},
   	// uView的自定义tabbar demo，定义tabbar
   	"tabBar": {
   		"color": "#909399",
   		"selectedColor": "#303133",
   		"backgroundColor": "#FFFFFF",
   		"borderStyle": "black",
   		"list": [
   			{
   				"iconPath": "/static/tab-bar/账单.png",
   				"selectedIconPath": "/static/tab-bar/账单_h.png",
   				"text": "账单",
   				"pagePath": "pages/bill_list/bill_list"
   			},
   			{
   				"iconPath": "/static/tab-bar/图表.png",
   				"selectedIconPath": "/static/tab-bar/图表_h.png",
   				"text": "图表",
   				"pagePath": "pages/bill_chat/bill_chat"
   			},
   			{
   				"iconPath": "/static/tab-bar/记账.png",
   				"selectedIconPath": "/static/tab-bar/记账_h.png",
   				"text": "记账",
   				"pagePath": "pages/bill_add/bill_add"
   			},
   			{
   				"iconPath": "/static/tab-bar/明细.png",
   				"selectedIconPath": "/static/tab-bar/明细_h.png",
   				"text": "账单",
   				"pagePath": "pages/bill_detail/bill_detail"
   			},
   			{
   				"iconPath": "/static/tab-bar/我的.png",
   				"selectedIconPath": "/static/tab-bar/我的_h.png",
   				"text": "我的",
   				"pagePath": "pages/my/my"
   			}
   		]
   	}
   }
   

2. 写对应的pages vue文件

   

3. 引入图标的png图片

   

4. 最后的结果就是