小程序进阶（三）----------- 页面配置 page.json

页面配置 page.json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

 

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。

页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项

 

配置示例

{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }

页面配置项列表

 

属性类型默认值描述navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如 #000000navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black / whitenavigationBarTitleTextString 导航栏标题文字内容backgroundColorHexColor#ffffff窗口的背景色backgroundTextStyleStringdark下拉 loading 的样式，仅支持 dark / lightenablePullDownRefreshBooleanfalse是否全局开启下拉刷新。 详见 下面onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位为px。 详见 下面说明disableScrollBooleanfalse设置为 true 则页面整体不能上下滚动；只在页面配置中有效，无法在 app.json 中设置该项

 当中两个页面事件处理函数：

onPullDownRefresh()

监听用户下拉刷新事件。

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新

onReachBottom()

监听用户上拉触底事件。

可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。在触发距离内滑动期间，本事件只会被触发一次。

在这当中我们来介绍一下：window

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

 

属性类型默认值描述最低版本navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如 #000000 navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black / white navigationBarTitleTextString 导航栏标题文字内容 navigationStyleStringdefault导航栏样式，仅支持以下值：default 默认样式custom 自定义导航栏，只保留右上角胶囊按钮微信版本 6.6.0backgroundColorHexColor#ffffff窗口的背景色 backgroundTextStyleStringdark下拉 loading 的样式，仅支持 dark / light backgroundColorTopString#ffffff顶部窗口的背景色，仅 iOS 支持微信版本 6.5.16backgroundColorBottomString#ffffff底部窗口的背景色，仅 iOS 支持微信版本 6.5.16

注：navigationStyle 只在 app.json 中生效。 

页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键。