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
  • 相关阅读:
    JDBC操作数据库的步骤 ?
    switch 是否能作用在 byte 上,是否能作用在 long 上, 是否能作用在 String 上?
    有哪些不同类型的IOC(依赖注入)方式?
    ApplicationContext通常的实现是什么?
    如何给Spring 容器提供配置元数据?
    一个”.java”源文件中是否可以包含多个类(不是内部类)? 有什么限制?
    数据库连接(Database link)?
    你怎样定义类的作用域?
    JSP的常用指令有哪些?
    Mapper 编写有哪几种方式?
  • 原文地址:https://www.cnblogs.com/lenbor/p/13468642.html
Copyright © 2011-2022 走看看