上次介绍了小程序的全局配置,还有一点页面配置没有介绍,今天首先就来看看小程序的页面配置,下面是官方的文档介绍:
下面我们一个个来看具体的效果。
导航栏背景颜色navigationBarBackgroundColor
设置导航栏的背景颜色,这里如果在app.json中设置了全局的,那么页面中的会覆盖全局的即如果在全局中有设置相应的最终显示的以页面中的为准,否则就按全局设置显示。实例代码如下:
这是全局配置中的背景色
这是日志页面的背景色,从上面可以看到最终显示的是淘宝的红色
导航栏标题颜色navigationBarTextStyle
导航栏标题颜色,仅支持 black / white,这里的可选项就只有两个黑色和白色,实例如下:
黑色标题效果
白色标题效果
导航栏文字navigationBarTitleText
导航栏标题文字内容,每个页面的标题栏文字,这个是可以用代码进行修改的。
窗口的背景色backgroundColor
窗口的背景色,貌似这个没看出什么效果来
下拉loading的样式backgroundTextStyle
下拉 loading 的样式,仅支持 dark / light,这里如果要看效果需要先设置下拉刷新的属性enablePullDownRefresh值为true才可以使用下拉刷新,实例如下:
下拉的效果对于两个选项来说效果不明显
开启下拉刷新enablePullDownRefresh
是否开启下拉刷新,只有设置为true时才可以使用下拉刷新的功能,当然下拉刷新并不是简单的像上面的设置就可以了。可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
页面触底距离onReachBottomDistance
页面上拉触底事件触发时距页面底部距离,单位为px。默认值为50
页面能否滚动disableScroll
设置为 true 则页面整体不能上下滚动;只在页面配置中有效,无法在 app.json 中设置该项