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": "我的"
}
]
},
color | HexColor | tab上的文字默认颜色 |
selectedColor | HexColor | tab上的文字选中时的颜色 |
borderSlyle | String | tab上边框的颜色 可选值black与while |
backgroundColr | HexColor | tab的背景图 |
list | Array | tab 列表 |
pagePath | String | 页面路径 必须在pages中先定义 |
text | String | tab上的按钮文字 |
iconPath | String | 图片路径 icon大小限制40kb建议尺寸81x81px |
selectedIconPath | String | 选中时的图片路径 |