zoukankan      html  css  js  c++  java
  • 移动端开发基础【19】pages.json的配置项globalStyle

    一个uni-app项目中用来进行全局配置的文件就是pages.json,它决定了页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等。它与微信小程序中app.json的页面管理部分相似。需要注意的是定位权限申请等内容原本是属于app.json的,但在uni-app中它是在manifest中配置的。

    一.配置项列表

    属性

    类型

    必填

    描述

    平台兼容

    globalStyle

    Object

    设置默认页面的窗口表现

     

    pages

    Object Array

    设置页面路径及窗口表现

     

    easycom

    Object

    组件自动引入规则

    2.5.5+

    tabBar

    Object

    设置底部 tab 的表现

     

    condition

    Object

    启动模式配置

     

    subPackages

    Object Array

    分包加载配置

     

    preloadRule

    Object

    分包预下载规则

    微信小程序

    workers

    String

    Worker 代码放置的目录

    微信小程序

    二、globalStyle

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

    (1)设置导航栏背景颜色(同状态栏背景色)

    属性:navigationBarBackgroundColor

    类型:HexColor

    默认值:#F7F7F7

    平台差异说明:APP与H5为#F7F7F7,小程序平台请参考相应小程序文档

    (2)设置导航栏标题颜色及状态栏前景颜色,仅支持 black/white

    属性:navigationBarTextStyle

    类型:String

    默认值:white

    (3)设置导航栏标题文字内容

    属性:navigationBarTitleText

    类型:String

    (4)设置导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏

    属性:navigationStyle    

    类型:String

    默认值:default

    (5)设置下拉显示出来的窗口的背景色

    属性:backgroundColor

    类型:HexColor

    默认值:#ffffff

    平台差异性:微信小程序

    (6)设置下拉 loading 的样式,仅支持 dark / light

    属性:backgroundTextStyle

    类型:String

    默认值:dark

    平台差异性:微信小程序

    (7)设置是否开启下拉刷新

    属性:enablePullDownRefresh  

    类型:Boolean

    默认值:false

    (8)设置页面上拉触底事件触发时距页面底部距离,单位只支持px

    属性:onReachBottomDistance

    类型:Number

    默认值:50

    (9) 设置窗口显示的动画效果

    属性:animationType

    类型:String

    默认值:pop-in

    平台差异性:App

    (10) 设置窗口显示动画的持续时间,单位为 ms

    属性:animationDuration    

    类型:Number

    默认值:300

    平台差异性:App

    globalStyle的属性还有很多,以上介绍的只是其中的一部分,如果想了解更多,可以去官网。

    以下是一段包含globalStyle配置选项的 pages.json 文件的代码:

    {

        "globalStyle": {

            "navigationBarTextStyle": "black",

            "navigationBarTitleText": "测试",

            "navigationBarBackgroundColor": "#F8F8F8",

            "backgroundColor": "#F8F8F8",

            "usingComponents":{

                "collapse-tree-item":"/components/collapse-tree-item"

            },

            "renderingMode": "seperated", // 仅微信小程序,webrtc 无法正常时尝试强制关闭同层渲染

            "pageOrientation": "portrait"//横屏配置,全局屏幕旋转设置(仅 APP/微信/QQ小程序),支持 auto / portrait / landscape

    },

    }

    官网:http://www.lenbor.com
  • 相关阅读:
    [书目20160620]自媒体时代,我们该如何做营销
    [转]Oracle Form 触发器执行顺序
    [转]在ASP.NET开发中容易忽略的2个小问题 Cookie乱码存取异常 和 iframe弹框的login跳转
    [转]菜鸟程序员之Asp.net MVC Session过期异常的处理
    [转]Asp.net MVC使用Filter解除Session, Cookie等依赖
    [转]异步、多线程、任务、并行编程之一:选择合适的多线程模型
    [转]Membership 到 .NET4.5 之 ASP.NET Identity
    [转]前后端分离开发模式下后端质量的保证 —— 单元测试
    [转]Asp.net MVC 利用PartialView 构造自定义菜单
    [转]Membership三步曲之入门篇
  • 原文地址:https://www.cnblogs.com/lenbor/p/13468642.html
Copyright © 2011-2022 走看看