uni-app项目是通过pages节点配置应用由哪些页面组成,pages节点接收一个数组,数组每个项都是一个对象,其属性值如下:(1) 属性:path类型:String描述:配置页面路径(2) 属性:style类型:Object描述:配置页面窗口样式注意点:(1)pages节点的第一项为应用入口页(即首页)(2)应用中新增/减少页面,都需要对 pages 数组进行修改(3)文件名不需要写后缀,框架会自动寻找路径下的页面资源开发目录为:
{ "pages":[ { "path":"pages/index/index", "style":{...} },{ "path":"pages/login/login", "style":{...} } ]}
style
用于设置每个页面的状态栏、导航条、标题、窗口背景色等。
页面中配置项会覆盖 globalStyle 中相同的配置项
属性 | 类型 | 默认值 | 描述 | 平台差异说明 |
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色(同状态栏背景色),如"#000000" | |
navigationBarTextStyle | String | white | 导航栏标题颜色及状态栏前景颜色,仅支持 black/white | |
navigationBarTitleText | String | 导航栏标题文字内容 | ||
navigationBarShadow | Object | 导航栏阴影 | ||
navigationStyle | String | default | 导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏 | 微信小程序 7.0+、百度小程序、H5、App(2.0.3+) |
backgroundColor | HexColor | #ffffff | 窗口的背景色 | 微信小程序、百度小程序、字节跳动小程序 |
backgroundTextStyle | String | dark | 下拉 loading 的样式,仅支持 dark/light | |
enablePullDownRefresh | Boolean | false | 是否开启下拉刷新 |
以上是一些style的属性,更多属性可以去官网查看。
代码示例:
{ "pages":[{ "path":"pages/index/index", "style":{ "navigationBarTitleText":"首页",//设置页面标题文字 "enablePullDownRefresh":true//开启下拉刷新 } }, ... ]}
自定义导航栏使用注意
当navigationStyle设为custom或titleNView设为false时,原生导航栏不显示,此时要注意几个问题:(1)非H5端,手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因,即全屏可写内容。uni-app提供了状态栏高度的css变量--status-bar-height,如果需要把状态栏的位置从前景部分让出来,可写一个占位div,高度设为css变量。