pages.json的配置項pages
uni-app項目是通過pages節點配置應用由哪些頁面組成，pages節點接收一個數組，數組每個項都是一個對象，其屬性值如下：
(1) 屬性：path
類型：String
描述：配置頁面路徑
(2) 屬性：style
類型：Object
描述：配置頁面窗口樣式
注意點：
(1)pages節點的第一項為應用入口頁（即首頁）
(2)應用中新增/減少頁面，都需要對 pages 數組進行修改
(3)文件名不需要寫后綴，框架會自動尋找路徑下的頁面資源
開發目錄為：
代碼示例：需要在pages.json中編寫
{
"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變量。
(2)如果原生導航欄不能滿足需求，推薦使用uni ui的自定義導航欄NavBar。這個前端導航欄自動處理了狀態欄高度占位問題。
(3)前端導航欄搭配原生下拉刷新時，會有問題，包括
- 微信小程序下iOS需要拉更長才能看到下拉刷新的三個點，而Android是從屏幕頂部下拉，無法從導航欄下方下拉。如果一定要從前端導航欄下拉，小程序下只能放棄原生下拉刷新，純前端模擬，參考mescroll插件，但這樣很容易產生性能問題。目前小程序平台自身沒有提供更好的方案
- App和H5下，原生下拉刷新提供了circle樣式，可以指定offset偏移量（pages.json的app-plus下配置），自定義下拉圈出現的位置。在hello uni-app的擴展組件中有示例。
(4)非H5端，前端導航蓋不住原生組件。如果頁面有video、map、textarea(僅小程序)等原生組件，滾動時會覆蓋住導航欄
如果是小程序下，可以使用cover-view來做導航欄，避免覆蓋問題
如果是App下，建議使用titleNView或subNVue，體驗更好
(5)前端組件在渲染速度上不如原生導航欄，原生導航可以在動畫期間渲染，保證動畫期間不白屏，但使用前端導航欄，在新窗體進入的動畫期間可能會整頁白屏，越低端的手機越明顯。
(6)以上討論的是前端自定義導航欄，但在App側，原生導航欄也提供了比小程序導航更豐富的自定義性
titleNView：給原生導航欄提供更多配置，包括自定義按鈕、滾動漸變效果、搜索框等。
subNView：使用nvue原生渲染，所有布局自己開發，具備一切自定義靈活度。
(7)頁面禁用原生導航欄后，想要改變狀態欄的前景字體樣式，仍可設置頁面的 navigationBarTextStyle 屬性（只能設置為 black或white）。如果想單獨設置狀態欄顏色，App端可使用plus.navigator.setStatusBarStyle設置。注意部分低端Android手機（4.4）自身不支持設置狀態欄前景色。
鑒於以上問題，在原生導航能解決業務需求的情況下，盡量使用原生導航。甚至有時需要犧牲一些不是很重要的需求。在App和H5下，uni-app提供了靈活的處理方案：titleNView、subNVue、或整頁使用nvue。但在小程序下，因為其自身的限制，沒有太好的方案。有必要的話，也可以用條件編譯分端處理。