如何Pages.json配置第三章

globalStyle和pages

globalStyle用于全局设置应用的状态栏 ，导航条, 标题,窗口背景

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	    ,{
            "path" : "pages/ceshi/ceshi",
            "style" : {}
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "社交app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

pages可以配置应用由有哪些页面组成，pages 节点接收一个数组 数组中的每一个都是i一个对象..在哪。在pages.json中填写如下：

. 

​
​

"pages": [{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "首页",
		"enablePullDownRefresh": true,
		"disableScroll": true // 设置为 true 则页面整体不能上下滚动（bounce效果），只在页面配置中有效，在globalStyle中设置无效
	}
}, {
	"path": "pages/mine/mine",
	"style": {
		"navigationBarTitleText": "我的",
		"enablePullDownRefresh": false
	}
}],



​

自定义导航栏使用注意事项

如果原生导航栏不能满足需求，可以使用自定义导航栏。

如果要自定义导航栏，则需要将原生导航栏隐藏 在pages.json文件如下：

{
		"path": "pages/home/index",
		"style": {
			"navigationBarTitleText": "首页",
			"navigationStyle": "custom" // 使用自定义导航栏，系统会关闭默认的原生导航栏
		}
}

tabBar

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

"tabBar": {
		"color": "#BEC0C3",
		"selectedColor": "#00A29C",
		"borderStyle": "#EEEEEE",
		"backgroundColor": "#ffffff",
		"list": [{
				"pagePath": "pages/tabBar/devicePage",
				"iconPath": "static/image/tabbar/device.png",
				"selectedIconPath": "static/image/tabbar/device_active.png",
				"text": "设备"
			},
			{
				"pagePath": "pages/tabBar/voicePage",
				"iconPath": "static/image/tabbar/device.png",
				"selectedIconPath": "static/image/tabbar/device_active.png",
				"text": "语音"
			},
 
			{
				"pagePath": "pages/tabBar/warnPage",
				"iconPath": "static/image/tabbar/warning.png",
				"selectedIconPath": "static/image/tabbar/warning_active.png",
				"text": "预警"
			}, {
				"pagePath": "pages/tabBar/locationPage",
				"iconPath": "static/image/tabbar/position.png",
				"selectedIconPath": "static/image/tabbar/position_active.png",
				"text": "位置"
			}, {
				"pagePath": "pages/tabBar/fencePage",
				"iconPath": "static/image/tabbar/fence.png",
				"selectedIconPath": "static/image/tabbar/fence_active.png",
				"text": "围栏"
			}, {
				"pagePath": "pages/tabBar/myPage",
				"iconPath": "static/image/tabbar/my.png",
				"selectedIconPath": "static/image/tabbar/my_active.png",
				"text": "我的"
			}
		]
	},

tabBar配置项说明

color	HexColor	tab上的文字默认颜色
selectedColor	HexColor	tab上的文字选中时的颜色
borderSlyle	String	tab上边框的颜色 可选值black与while
backgroundColr	HexColor	tab的背景图
list	Array	tab 列表

list 属性说明

pagePath	String	页面路径 必须在pages中先定义
text	String	tab上的按钮文字
iconPath	String	图片路径 icon大小限制40kb建议尺寸81x81px
selectedIconPath	String	选中时的图片路径