uni-app(三)

• 页面的基本样式配置

小程序里的结果

浏览器的显示结果

• 配置tabbar

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

 配置tabbar网址：https://uniapp.dcloud.io/collocation/pages?id=tabbar

Tips:

• 当设置 position 为 top 时，将不会显示 icon
• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

 属性说明

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

midButton属性说明：

京东小程序下面的选项卡就用到了tabBar属性

tabBar的使用例子 写在pages.json里   

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path":"pages/message/message",
			// 在页面配置的style会把全局的覆盖掉
			"style":{
				"navigationBarTitleText":"信息页",
				"navigationBarBackgroundColor":"#aaaaff", //信息页的背景颜色，覆盖了之前的颜色
				// 设置h5的刷新 就是浏览器页面的下拉刷新样式
				"h5":{
					"pullToRefresh":{
						"color":"#007AFF"
					}
				}
			}
			
		}
		,{
			"path": "pages/index/index"
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "Hello",
		"navigationBarBackgroundColor": "#ffff00",
		// 在小程序里的下拉刷新样式
		"backgroundColor": "#7CCD7C", //下拉刷新的绿色
		"enablePullDownRefresh":true, //下拉刷新
		"backgroundTextStyle":"light" //下拉loading的样式
	},
	// 配置tabBar选项卡
	"tabBar":{
		// 一个list数组里至少配置两个数据
		"list":[
			{
				"text":"首页", //文本内容
				"pagePath":"pages/index/index",  //页面路径
				"iconPath":"./static/tabs/home.png"  ,//未选中时图片路径
				"selectedIconPath":"static/tabs/home-active.png" //选中时图片路径
			},
			{
				"text":"信息", //文本内容
				"pagePath":"pages/message/message",  //页面路径
				"iconPath":"./static/tabs/message.png"  ,//未选中时图片路径
				"selectedIconPath":"static/tabs/message-active.png" //选中时图片路径
			}
		]
		
	}
}

浏览器结果如下

         

小程序结果如下