uniapp开发小程序动态更换状态栏颜色

最新推荐文章于 2024-07-08 09:50:31 发布

小莉爱编程

最新推荐文章于 2024-07-08 09:50:31 发布

阅读量4.1k

点赞数 3

分类专栏： uniapp 文章标签：小程序 uni-app

本文链接：https://blog.csdn.net/qq_45018844/article/details/121267868

版权

uniapp 专栏收录该内容

24 篇文章 16 订阅 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍如何在uni-app开发的小程序中根据不同页面动态更换导航栏颜色，实现个性化界面效果。内容涵盖两个关键页面的配置方法，需在页面级别进行设置。

摘要由CSDN通过智能技术生成

需求

一个小程序不同页面，导航栏颜色更换
在这里插入图片描述

这是两个页面，一个小程序内~

onReady() {
			//动态修改状态栏的颜色
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ff0000'
			})
		},

这两个都是必填项哦~
有一个没填就没有效果，写在页面上跟生命周期一个层级的

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小莉爱编程

关注关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

uniapp(全端兼容通用) -实现轮播图切换时改变导航条颜色，uniapp根据轮播图颜色自动改变导航栏背景色（轮播图更换时动态改变导航栏的颜色，uni-app如何轮播图滑动时改变背景颜色和导航栏颜色

高级前端工程师

03-06

2889

uniapp，微信小程序，h5网页网站，安卓苹果app，nvue，导航栏背景色跟随轮播图动态更换，uview组件库，uniapp背景色跟随轮播图改变，vue uni-app+uview如何轮播图滑动时改变背景色，vue根据banner图颜色改变背景色_背景色随banner变化，swiper幻灯片变背景也改变，uniapp轮播图，uniapp导航栏颜色，uniapp背景色跟幻灯片图改变 vue，前端,CSS,背景颜色跟随轮播图片改变而改变，uniapp获取图片背景色并自动应用到导航条上怎么实现，根据轮播图片颜

uniApp 状态栏字体颜色

m0_57547956的博客

10-08

6067

{ "path": "pages/orderDetails/orderDetails", "style": { "navigationBarTextStyle": "订单详情", "enablePullDownRefresh": false, "navigationStyle": "custom", ...

1 条评论您还未登录，请先登录后发表或查看评论

uniapp修改APP端状态栏颜色

liang04273的博客

07-14

3434

修改状态栏颜色，首先去manifest.json中配置

Uinapp设置顶部头部背景和文字颜色

最新发布

m0_72189003的博客

07-08

923

【代码】Uinapp设置顶部头部背景和文字颜色。

uniapp 微信小程序配置全局主题色、实现动态修改主题色

wolf艺术人生

03-28

1万+

本文的实现目标是全局配置小程序的整体主题色，包括本地图标的色调。第一步实现在本地可以统一修改整体的主题色以及本地图标的颜色；第二步实现通过后台接口动态调整小程序前端的整体主题色以及本地图标颜色。本地图标的主题色调整需要使用svg格式的图片，关于svg图片颜色修改可以参考文章。

uni-app动态修改主题色（通过接口获取的颜色）

weixin_62192841的博客

12-11

1909

为方便节日改版，需要可以在web后台管理系统中可以设置颜色，然后app和小程序中通过接口获取颜色，展示对应风格的页面。小程序中无法使用document，即无法 window.document.documentElement.style.setProperty设置全局属性，使用仓库和样式绑定的方法实现。

uniapp自定义tabbar图标样式

10-13

在移动应用开发领域，uniAPP是一个非常流行的框架，它允许开发者使用一套代码库来构建多平台的应用，包括iOS、Android以及H5等。本话题主要关注如何在uniAPP中自定义tabbar的图标样式，这对于提升应用的用户体验和...

uni-app结合云函数开发小程序博客（一）：组件库使用、引入 Vuex 状态管理

图雀社区

05-06

786

❝ 本文由图雀社区认证作者「测不准」写作而成，图雀社区将连载其「uni-app 结合云函数开发小程序博客系列」，感谢作者的优质输出，让我们的技术世界变得更加美好???? ❞ uni-app 是一个使用 Vue.js 开发的跨平台应用的前端框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台；uni在跨端的...

uni-app 结合云函数开发小程序博客（一）：环境搭建

指尖泛出的繁华

04-26

532

本文由图雀社区认证作者测不准写作而成，图雀社区将连载其 uni-app 结合云函数开发小程序博客系列，感谢作者的优质输出，让我们的技术世界变得更加美好????uni-app 是一个使...

uniapp怎么设置导航栏颜色，标题颜色

weixin_60415789的博客

04-20

1万+

其中`navigationBarBackgroundColor`设置导航栏背景颜色，`navigationBarTextStyle`设置导航栏标题颜色（只能是"black"或"white"），`navigationBarTitleText`设置导航栏标题文本。在页面的 `onLoad` 或其他方法中，调用 `uni.setNavigationBarColor` API 动态设置导航栏颜色。frontColor: '#ffffff', // 导航栏标题颜色，只能是'black'或'white'

uni-app 设置状态栏背景色

02-20

1万+

在开发中遇到需求是：关闭H5和APP端原生导航栏，但APP端要设置状态栏 背景色。参考了官方文档，为此写下这篇笔记记录下。首先我们要在page.json文件中关闭原生导航栏，设置状态类字体颜色。代码如下： "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "navigationBarTextStyle": "black",//设置状态类字体颜色，只支持w

uniapp更改主题颜色

qq_39029949的博客

11-08

1007

'--primary-second-color': '#BEEACB' // 默认次主题颜色。'--primary-color': '#24C858', // 默认主题颜色。：用户在管理系统配置app端的颜色，用后端返回主题颜色来更改全局的主题颜色。在index.vue里面，在元素上设置:style="skinStyle"自动导入的在uniapp项目，安装要报错，只能自己手动导入了。：每个需要的页面都需要导入并且使用。

微信小程序--动态设置导航栏颜色 (navigationBarBackgroundColor)

qq_36770411的博客

09-07

6409

如果导航栏被隐藏或者页面没有设置导航栏，设置导航栏颜色将会失败。如果尝试了以上方法仍然无法解决问题，建议检查微信小程序开发工具的版本，确保使用的是最新稳定版，或者尝试重启开发工具和手机。检查是否有其他代码逻辑或插件影响了导航栏的设置。可能存在其他代码或插件对导航栏进行了修改或覆盖导致设置失败。确保使用有效的十六进制颜色值或颜色名称，并且以字符串形式传入。中调用，或者在需要设置导航栏颜色的事件触发时调用。来启用原生导航栏样式，并获得设置导航栏颜色的权限。检查是否有权限设置导航栏颜色。文件中，可以通过设置。

uni-app修改顶部状态栏颜色

热门推荐

Bright2017的博客

11-21

4万+

在pages.json中写默认的状态栏配置，我是自定义的顶部栏，所以主要看更改状态栏的颜色即可 { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "app-plus":{ "titleNView":false //去掉当前页的顶部导航栏 ...

uni-app小程序设置页面背景色

培根芝士的专栏

04-19

2774

在原生微信小程序中，可以通过下面的设置来设置页面背景色但是在uni-app上，这样的设置在小程序端并没有起作用。原因是因为style标签上加了scoped，那么如何在使用scoped的同时又能设置page背景色呢？

uniapp动态修改样式_在 SwiftUI 中动态修改状态栏文字颜色

weixin_42513054的博客

12-30

1119

一般来说，只要我们的 App 不是特别的简陋，基本上不存在所有页面的状态栏都是同一个颜色的情况。在过去使用 UIKit + Storyboard 的时候，我们可以在项目设置中将状态栏颜色设置为自动，或者在每个 View Controller 中重写 preferredStatusBarStyle 属性。但是对于完全基于 SwiftUI 的新工程而言，之前的解决方案都无法使用。在截至目前的 Xcod...

uniapp开发小程序动态更换状态栏颜色——简单便捷

xybhua的博客

03-06

1825

一个小程序内不同的页面，导航栏颜色更换。有一个没填就没有效果，写在页面上跟。这是两个页面，一个小程序内~这两个都是必填项哦~

微信小程序--动态设置导航栏颜色

Dark_programmer的博客

07-20

6016

微信自定义导航栏

使用uniapp开发京东小程序 沉浸式状态栏

04-20

使用uniapp开发京东小程序时，可以通过设置沉浸式状态栏来提升用户体验。沉浸式状态栏是指将状态栏与应用界面融为一体，使应用的内容延伸到状态栏区域，给用户一种全屏的视觉效果。要实现沉浸式状态栏，可以按照以下步骤进行操作： 1. 在uniapp项目的`manifest.json`文件中，找到`"mp-weixin"`或`"mp-alipay"`字段，添加`"window"`属性，并在该属性下添加`"navigationStyle"`属性，将其值设置为`"custom"`。这样可以自定义导航栏样式。 2. 在需要使用沉浸式状态栏的页面的vue文件中，可以通过设置`navigationBarStyle`属性来自定义导航栏样式。例如： ```vue <template> <view>  </view> </template> <script> export default { data() { return { navigationBarStyle: { backgroundColor: '#ffffff', // 导航栏背景色 borderBottom: 'none', // 底部边框线 }, }; }, }; </script> ``` 3. 在App.vue文件中，可以通过设置`onLaunch`生命周期函数来获取系统状态栏高度，并将其保存到全局变量中。例如： ```vue <script> export default { onLaunch() { uni.getSystemInfo({ success: (res) => { uni.setStorageSync('statusBarHeight', res.statusBarHeight); }, }); }, }; </script> ``` 4. 在需要使用沉浸式状态栏的页面的vue文件中，可以通过计算属性获取系统状态栏高度，并设置页面内容的上边距。例如： ```vue <template> <view :style="marginTopStyle">  </view> </template> <script> export default { computed: { marginTopStyle() { const statusBarHeight = uni.getStorageSync('statusBarHeight'); return `margin-top: ${statusBarHeight}px;`; }, }, }; </script> ``` 这样就可以实现在uniapp开发的京东小程序中使用沉浸式状态栏了。