首页 > 其他分享 >globalStyle 全局配置

globalStyle 全局配置

时间:2023-01-25 08:55:36浏览次数:56  
标签:globalStyle String App 配置 程序 H5 Object mp 全局

globalStyle

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

属性类型默认值描述平台差异说明
navigationBarBackgroundColor HexColor #F7F7F7 导航栏背景颜色(同状态栏背景色) APP与H5为#F7F7F7,小程序平台请参考相应小程序文档
navigationBarTextStyle String white 导航栏标题颜色及状态栏前景颜色,仅支持 black/white 支付宝小程序不支持,请使用 my.setNavigationBar
navigationBarTitleText String   导航栏标题文字内容  
navigationStyle String default 导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏,需看使用注意 微信小程序 7.0+、百度小程序、H5、App(2.0.3+)
backgroundColor HexColor #ffffff 下拉显示出来的窗口的背景色 微信小程序
backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark / light 微信小程序
enablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面生命周期  
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期  
backgroundColorTop HexColor #ffffff 顶部窗口的背景色(bounce回弹区域) 仅 iOS 平台
backgroundColorBottom HexColor #ffffff 底部窗口的背景色(bounce回弹区域) 仅 iOS 平台
titleImage String   导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址 支付宝小程序、H5、APP
transparentTitle String none 导航栏整体(前景、背景)透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明 支付宝小程序、H5、APP
titlePenetrate String NO 导航栏点击穿透 支付宝小程序、H5
pageOrientation String portrait 横屏配置,屏幕旋转设置,仅支持 auto / portrait / landscape 详见 响应显示区域变化 App 2.4.7+、微信小程序、QQ小程序
animationType String pop-in 窗口显示的动画效果,详见:窗口动画 App
animationDuration Number 300 窗口显示动画的持续时间,单位为 ms App
app-plus Object   设置编译到 App 平台的特定样式,配置项参考下方 app-plus App
h5 Object   设置编译到 H5 平台的特定样式,配置项参考下方 H5 H5
mp-alipay Object   设置编译到 mp-alipay 平台的特定样式,配置项参考下方 MP-ALIPAY 支付宝小程序
mp-weixin Object   设置编译到 mp-weixin 平台的特定样式 微信小程序
mp-baidu Object   设置编译到 mp-baidu 平台的特定样式 百度小程序
mp-toutiao Object   设置编译到 mp-toutiao 平台的特定样式 字节跳动小程序
mp-lark Object   设置编译到 mp-lark 平台的特定样式 飞书小程序
mp-qq Object   设置编译到 mp-qq 平台的特定样式 QQ小程序
mp-kuaishou Object   设置编译到 mp-kuaishou 平台的特定样式 快手小程序
mp-jd Object   设置编译到 mp-jd 平台的特定样式 京东小程序
usingComponents Object   引用小程序组件,参考 小程序组件  
renderingMode String   同层渲染,webrtc(实时音视频) 无法正常时尝试配置 seperated 强制关掉同层 微信小程序
leftWindow Boolean true 当存在 leftWindow 时,默认是否显示 leftWindow H5
topWindow Boolean true 当存在 topWindow 时,默认是否显示 topWindow H5
rightWindow Boolean true 当存在 rightWindow 时,默认是否显示 rightWindow H5
rpxCalcMaxDeviceWidth Number 960 rpx 计算所支持的最大设备宽度,单位 px App(vue2 且不含 nvue)、H5(2.8.12+)
rpxCalcBaseDeviceWidth Number 375 rpx 计算使用的基准设备宽度,设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算,单位 px App(vue2 且不含 nvue)、H5(2.8.12+)
rpxCalcIncludeWidth Number 750 rpx 计算特殊处理的值,始终按实际的设备宽度计算,单位 rpx App(vue2 且不含 nvue)、H5(2.8.12+)
dynamicRpx Boolean false 动态 rpx,屏幕大小变化会重新渲染 rpx App-nvue(vue3 固定值为 true) 3.2.13+
maxWidth Number   单位px,当浏览器可见区域宽度大于maxWidth时,两侧留白,当小于等于maxWidth时,页面铺满;不同页面支持配置不同的maxWidth;maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选) H5(2.9.9+)

注意

  • 支付宝小程序使用titleImage时必须使用https的图片链接地址,需要真机调试才能看到效果,支付宝开发者工具内无效果
  • globalStyle中设置的titleImage也会覆盖掉pages->style内的设置文字标题
  • 使用 maxWidth 时,页面内fixed元素需要使用--window-left,--window-right来保证布局位置正确
  • dynamicRpx vue3 nvue页面已移除此配置,升级为横竖屏切换自动rpx,如果不需要可以使用 px

 

 

 

"globalStyle": {
// 导航栏标题颜色和状态栏前景色,仅支持白色white和黑色black
"navigationBarTextStyle": "white", // black
//导航栏标题文字
// 当style配置项与globalStyle配置项相同时,会覆盖globalStyle配置项
"navigationBarTitleText": "河狸",
//导航栏背景色//蓝色#0000FF
"navigationBarBackgroundColor": "#007AFF",
// backgroundColor:可以用来修改下拉显示的窗口背景颜色
// enablePullDownRefresh:是否开启下拉刷新,设置为true/false
// 两者搭配使用才能看到下拉刷新窗口背景颜色
// 红色#FF0000 白色#FFFFFF
"backgroundColor": "#FF0000",
"enablePullDownRefresh": true,
// backgroundTextStyle:可以修改loading下拉样式,
// dark/light,在浏览器中是一个正在加载的圈,在微信开发者工具中是三个点
"backgroundTextStyle": "light"
// "rpxCalcMaxDeviceWidth": 1024
},

标签:globalStyle,String,App,配置,程序,H5,Object,mp,全局
From: https://www.cnblogs.com/beichengshiqiao/p/17066647.html

相关文章

  • 2.网络配置
    pingip检测两台机器之间是否能发送数据ip地址前三位一样说明在同一个局域网       桥接模式:此时所有的pc端和虚拟机都是由同一个路由器动态分配ip,即pc......
  • 华为路由器 OSPF单区域配置
    拓扑图一、R1 路由器<Huawei>sys[Huawei]sysR1[R1]uninen[R1]dhcpenable[R1]intg0/0/0[R1-GigabitEthernet0/0/0]ipaddr192.168.20.224#配置DHCP[R1-GigabitEthe......
  • gin框架分析二:gin初始化,默认配置实例构建过程
    gin的函数调用流程gin的函数调用过程大概如下图:GIN函数调用过程第一步构建GIN实例,第二步构建GIN路由,第三步则是启动http.server包,坚挺HTTP请求,并将请求处理交给gin框架......
  • Windows11系统下配置JAVA环境变量(JDK-19版本)
    JDK下载1、访问oracle官网https://www.oracle.com/2、点击导航条中的Resources,点击DeveloperDownlads进入3、继续点击Java进入4、继续点击Java(JDK)for......
  • STM32F401 Proteus 仿真 串口两种发送方式 编译用GCC ,寄存器配置方式
    用的proteus8.9中文版,STM32F401可能是支持的最复杂的MCU了吧,就用这个做实验了。编译器用GCC,在proteus中安装调试都很方便,编程实验用寄存器配置方式,因为仅仅是学习,简单直......
  • 环境简单配置
    rem(remcmd注释声明)cmd默认路径:C:\Users\用户名>有些不喜欢将测试文件放在C盘这时要将cmd的工作目录更改不然无法找到练习文件以D盘根目录为例cd/dd:\ 练习......
  • spring boot——请求与参数校验——重要概念——配置CORS实现跨域——华章
                              CorsConfig packageorg.example.cors.config;importorg.springframework.con......
  • maven打包配置
    在pom.xml文件中插入<plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-jar-plugin</artifactId>......
  • MySQL笔记01: MySQL入门_1.2 MySQL下载安装与配置
     2.2MySQL下载安装与配置 2.2.1MySQL下载  MySQL中文官网:https://www.mysql.com/cn/   MySQL英文官网:https://www.mysql.com/   MySQL官网下载地址:h......
  • 【教程】配置多个SSH-Key
    ✨SSH安全外壳协议(SecureShellProtocol,简称SSH)是一种加密的网络传输协议,可在不安全的网络中为网络服务提供安全的传输环境。SSH通过在网络中建立安全隧道(英语:securecha......