# 頁面配置
每一個小程序頁面也可以使用`.json`文件來對本頁面的窗口表現進行配置。頁面中配置項在當前頁面會覆蓋`app.json`的`window`中相同的配置項。文件內容為一個 JSON 對象,有以下屬性:
## [](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html#配置項)配置項
| 屬性 | 類型 | 默認值 | 描述 | 最低版本 |
| --- | --- | --- | --- | --- |
| navigationBarBackgroundColor | HexColor | #000000 | 導航欄背景顏色,如`#000000` | |
| navigationBarTextStyle | string | white | 導航欄標題顏色,僅支持`black`/`white` | |
| navigationBarTitleText | string | | 導航欄標題文字內容 | |
| navigationStyle | string | default | 導航欄樣式,僅支持以下值:`default`默認樣式 `custom`自定義導航欄,只保留右上角膠囊按鈕 | 微信客戶端 7.0.0 |
| backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
| backgroundTextStyle | string | dark | 下拉 loading 的樣式,僅支持`dark`/`light` | |
| backgroundColorTop | string | #ffffff | 頂部窗口的背景色,僅 iOS 支持 | 微信客戶端 6.5.16 |
| backgroundColorBottom | string | #ffffff | 底部窗口的背景色,僅 iOS 支持 | 微信客戶端 6.5.16 |
| enablePullDownRefresh | boolean | false | 是否開啟當前頁面下拉刷新。
詳見[Page.onPullDownRefresh](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onpulldownrefresh) | |
| onReachBottomDistance | number | 50 | 頁面上拉觸底事件觸發時距頁面底部距離,單位為px。
詳見[Page.onReachBottom](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onreachbottom) | |
| pageOrientation | string | portrait | 屏幕旋轉設置,支持`auto`/`portrait`/`landscape`
詳見[響應顯示區域變化](https://developers.weixin.qq.com/miniprogram/dev/framework/view/resizable.html) | [2.4.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)(auto) /[2.5.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)(landscape) |
| disableScroll | boolean | false | 設置為`true`則頁面整體不能上下滾動。
只在頁面配置中有效,無法在`app.json`中設置 | |
| disableSwipeBack | boolean | false | 禁止頁面右滑手勢返回 | 微信客戶端 7.0.0 |
| usingComponents | Object | 否 | 頁面[自定義組件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)配置 | [1.6.3](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) |
> 頁面配置中只能設置`app.json`中`window`對應的配置項,以決定本頁面的窗口表現,所以無需寫`window`這個屬性。
## [](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html#配置示例)配置示例
~~~
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
~~~
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request