若依(ruoyi)RuoYiApp版—全局样式globalStyle
本文介绍了uni-app中globalStyle全局样式的配置方法，重点解析了RuoYi-APP在pages.json中默认提供的样式属性及其作用。文章详细列出了15个常用配置项，包括导航栏背景色、标题样式、下拉刷新设置等，并说明了各属性的平台适配差异。通过修改navigationBarBackgroundColor属性的示例，展示了如何实现导航栏颜色自定义。这些全局样式配置能统一管理应用界面风格
·
globalStyle是全局样式，表示默认页面的窗口表现，主要用于设置应用的状态栏、导航条、标题、窗口背景色等。
这个配置在pages.json中体现，若依app默认提供了三个属性
出了这三个属性外，还有其他属性。
| 属性 | 类型 | 默认值 | 描述 | 平台差异说明 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #ffffff | 导航栏背景颜色（同状态栏背景色），RuoYi-APP 默认采用白色，贴合移动办公简洁风格，提升页面可读性。 | APP 与 H5 默认为 #ffffff，小程序平台请参考相应小程序文档，可根据自身需求修改。 |
| navigationBarTextStyle | String | black | 导航栏标题颜色及状态栏前景颜色，仅支持 black/white 两种取值，RuoYi-APP 搭配白色导航栏使用 black，保证文字清晰。 | 全平台通用，无额外差异，仅支持指定两种颜色，不可自定义其他颜色。 |
| navigationBarTitleText | String | RuoYi 移动办公 | 导航栏标题文字内容，RuoYi-APP 全局默认设置为 “RuoYi 移动办公”，各页面可单独配置覆盖该值。 | 全平台通用，小程序、APP、H5 均支持页面级配置覆盖全局默认值。 |
| navigationStyle | String | default | 导航栏样式，仅支持 default/custom，custom 即取消默认原生导航栏，RuoYi-APP 默认使用 default 原生样式，保证操作一致性。 | 微信小程序 7.0+、百度小程序、H5、App（2.0.3+）、小红书小程序支持 custom 样式，其他平台默认仅支持 default。 |
| backgroundColor | HexColor | #f8f8f8 | 下拉显示出来的窗口的背景色，RuoYi-APP 默认采用浅灰色，降低长时间办公的视觉压迫感。 | 微信小程序、小红书小程序优先读取该配置，APP 与 H5 可结合页面背景色灵活适配。 |
| backgroundTextStyle | String | dark | 下拉 loading 的样式，仅支持 dark/light，RuoYi-APP 搭配浅灰色背景使用 dark，保证加载动画可见性。 | 主要适配微信小程序，APP 与 H5 下拉 loading 样式可通过额外配置补充，默认继承该值。 |
| enablePullDownRefresh | Boolean | true | 是否开启全局下拉刷新，RuoYi-APP 默认开启，适配办公场景中刷新业务数据、通知列表的高频需求。 | 全平台通用，无需刷新的页面可在自身页面配置中单独设置为 false，覆盖全局配置。 |
| onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离，单位为 px，RuoYi-APP 默认 50px，适配移动端手指操作习惯。 | 全平台通用，数值可根据页面布局调整，建议保持 30-60px 区间，提升用户体验。 |
| backgroundColorTop | HexColor | #ffffff | 顶部窗口的背景色（bounce 回弹区域），RuoYi-APP 默认与导航栏背景色一致，保证视觉统一。 | 仅 iOS 平台生效，Android 平台无 bounce 回弹区域，该配置不生效。 |
| backgroundColorBottom | HexColor | #ffffff | 底部窗口的背景色（bounce 回弹区域），RuoYi-APP 默认与页面背景色适配，避免视觉突兀。 | 仅 iOS 平台生效，Android 平台无相关回弹区域，配置不生效。 |
| titleImage | String | 无 | 导航栏图片地址（替换当前文字标题），RuoYi-APP 默认不配置，保持文字标题简洁明了。 | 支付宝小程序、H5、APP 支持配置，支付宝小程序内必须使用 https 的图片链接地址。 |
| transparentTitle | String | none | 导航栏整体（前景、背景）透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明。RuoYi-APP 默认不透明。 | 支付宝小程序、H5、APP 支持该配置，小程序其他平台暂不支持。 |
| pageOrientation | String | portrait | 横屏配置，屏幕旋转设置，仅支持 auto / portrait / landscape。RuoYi-APP 默认竖屏，适配办公场景操作。 | App 2.4.7+、微信小程序、QQ 小程序支持，其他平台默认固定竖屏，不可修改。 |
| app-plus | Object | 无 | 设置编译到 App 平台的特定样式，RuoYi-APP 可通过该配置适配 APP 端个性化样式需求。 | 仅 App 平台生效，其他平台忽略该配置。 |
| h5 | Object | 无 | 设置编译到 H5 平台的特定样式，RuoYi-APP 可通过该配置适配浏览器端显示效果。 | 仅 H5 平台生效，其他平台忽略该配置。 |
| mp-weixin | Object | 无 | 设置编译到微信小程序平台的特定样式，适配微信小程序端的视觉与交互规范。 | 仅微信小程序平台生效，其他平台忽略该配置。 |
比如我们修改navigationBarBackgroundColor属性
"navigationBarBackgroundColor": "#ff0000"
保存后，程序运行就可以看到
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
4
0- 0
已为社区贡献13条内容
所有评论(0)