uni-app微信小程序开发 - pages.json - globalStyle(全局配置)

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

  • navigationBarBackgroundColor | 导航栏背景颜色(同状态栏背景色)
  • navigationBarTextStyle | 导航栏标题颜色及状态栏前景颜色,仅支持 black/white
  • navigationBarTitleText | 导航栏标题文字内容
  • navigationStyle | 导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏,需看使用注意
  • backgroundColor | 下拉显示出来的窗口的背景色
  • backgroundTextStyle | 下拉 loading 的样式,仅支持 dark / light
  • enablePullDownRefresh | 是否开启下拉刷新,详见页面生命周期
  • onReachBottomDistance | 页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期
  • pageOrientation | 横屏配置,屏幕旋转设置,仅支持 auto / portrait / landscape 详见 响应显示区域变化
  • mp-weixin | 设置编译到 mp-weixin 平台的特定样式
  • usingComponents | 引用小程序组件,参考 小程序组件
  • renderingMode | 同层渲染,webrtc(实时音视频) 无法正常时尝试配置 seperated 强制关掉同层

示例:

{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index"
            // "style": {
            //  "navigationBarTitleText": "uni-app"
            // }
        }
    ],
    "globalStyle": {
        "navigationBarBackgroundColor": "#FF0000", // 导航栏背景颜色(同状态栏背景色)
        "navigationBarTextStyle": "white", // 导航栏标题颜色及状态栏前景颜色,仅支持 black/white
        "navigationBarTitleText": "标题",
        // "navigationStyle":"custom", // 导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏,需看使用注意
        "backgroundColor": "#0066CC", // 下拉显示出来的窗口的背景色
        "backgroundTextStyle": "dark", // 下拉 loading 的样式,仅支持 dark / light
        "enablePullDownRefresh": true, // 是否开启下拉刷新,详见页面生命周期
        "onReachBottomDistance": 100, // 页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期
        "pageOrientation": "auto" // 横屏配置,屏幕旋转设置,仅支持 auto / portrait / landscape
    }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • uni-app的生命周期分为应用生命周期和页面生命周期还有组件生命周期。 应用生命周期[https://uniap...
    张中华阅读 3,788评论 0 6
  • uni-app框架介绍 介绍 uni-app 是一个跨端开发框架,一套代码运行多个平台,并可以使用条件编译实现不同...
    Jagtu阅读 13,413评论 0 0
  • uni-app的基本使用 课程介绍: 基础部分: 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件...
    Neo_duan阅读 2,177评论 1 1
  • 环境搭建 页面外观配置 数据绑定 uni-app的生命周期 组件的使用 条件注释跨端兼容 uni-app的事件 导...
    不是隔壁的老王啊阅读 2,666评论 0 0
  • 在pages.json 通过globalStyle进行全局配置属性类型默认值描述 navigationBarBac...
    陈情令阅读 667评论 0 1