微信小程序自定义头部导航栏 和背景颜色

最新推荐文章于 2024-06-05 17:04:40 发布
最新推荐文章于 2024-06-05 17:04:40 发布
阅读量2.3w 收藏 8
点赞数 4
文章标签： MPVUE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42306443/article/details/86498076
版权

在微信小程序中，自定义导航栏的颜色 可以在app.json.  window里面添加navigationBarBackgroundColor属性。

但是颜色只能为十六进制颜色码，不能使用rgb，或者rgba.。

为了满足更多用户的需求，微信官方给出了一个navigationStyle属性。

官方文档：navigationStyle 导航栏样式，仅支持 default/custom。custom  模式可自定义导航栏，只保留右上角胶囊状的按钮)。

在app.json window 增加 navigationStyle:custom ，顶部导航栏就会消失，保留右上角胶囊状的按钮，如下图所示

易之晓晓
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
10-16
主要介绍了微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
微信小程序-动态修改顶部导航栏颜色、背景色
lp-Strive的博客
03-11 8928
代码： wx.setNavigationBarTitle({ title: '个人中心' }) wx.setNavigationBarColor({ frontColor: '#ffffff', // 必写项【该字体颜色仅支持 #ffffff 和 #000000 】 backgroundColor: '#25BDCE', // 传递的颜色值【仅支持有效值为十六进制颜色】 animation: { // 可选项 dura..
小程序中实现自定义头部导航组件
最新发布
qq_45290368的博客
06-05 1490
小程序中实现自定义头部导航组件
微信小程序--动态设置导航栏颜色 (navigationBarBackgroundColor)
qq_36770411的博客
09-07 5713
如果导航栏被隐藏或者页面没有设置导航栏，设置导航栏颜色将会失败。如果尝试了以上方法仍然无法解决问题，建议检查微信小程序开发工具的版本，确保使用的是最新稳定版，或者尝试重启开发工具和手机。检查是否有其他代码逻辑或插件影响了导航栏的设置。可能存在其他代码或插件对导航栏进行了修改或覆盖导致设置失败。确保使用有效的十六进制颜色值或颜色名称，并且以字符串形式传入。中调用，或者在需要设置导航栏颜色的事件触发时调用。来启用原生导航栏样式，并获得设置导航栏颜色的权限。检查是否有权限设置导航栏颜色。文件中，可以通过设置。
微信小程序的导航栏颜色
weixin_40935473的博客
01-22 7977
微信小程序做好后看到上面的导航不好看想设置一下，就是这个位置三个点，一个圈 设置当然先进入你的全局app.json中进行修改 找到你的app.json，其中含有pages下面都是你的页面你设置信息 看到windows下中 navigationBarBackgroundColor 属性设置为"#000000", 就是黑色的背景 backgroundColor 属性设置为"#fff", 就是白色的...
微信小程序设置单个页面自定义头部为背景图
cimbala的博客
05-16 4271
文章目录第一步：挑选好需要显示的图片。第二步：在`pages.json`文件中添加`navigationStyle`样式。第三步：编写`.vue`文件效果图 第一步：挑选好需要显示的图片。   裁剪好尺寸，存放在static目录下。 第二步：在pages.json文件中添加navigationStyle样式。   想要在哪个页面自定义头部背景图就在pages页面节点下设置navigationStyle样式。 "navigationStyle":"custom", 第三步：编写.vue文件 <vi
微信小程序 自定义头部导航栏 navigationStyle
08-03
&amp;平板设备，在某些时候，不想要自带的顶部导航栏，需要自己定义，这时可以将自定义的导航栏做成一个组件，然后做一下初始配置，在每个页面引用，初始化，即可得到一个自定义的顶部导航栏，即可在当前页面自定义左右...
微信小程序自定义头部标题导航栏
05-24
* noSticky: 取消导航栏粘性布局(不占头部导航栏位置)，默认不取消 * opacity: 导航栏透明度，默认1不透明 * showNavBtn: 是否显示左侧导航按钮，默认true显示 * navIcon: 用户自定义导航按钮图标路径 * ...
微信小程序自定义头部导航栏（组件化）
01-03
本文实例为大家分享了微信小程序自定义头部导航栏的具体代码，供大家参考，具体内容如下 效果图 支持 导航栏自定义背景颜色、背景图片 支持返回文字自定义 支持导航标题自定义 首先在app.json window配置项添加 ...
微信小程序-页面配置-顶部导航栏背景色渐变
11-29
自定义tabBar页面的顶部导航栏，并保持导航栏的风格与其他tabBar页面导航栏风格统一，也就是导航栏标题文字排版统一。
自定义导航栏颜色
08-19
iOS修改导航栏背景颜色
微信小程序设置不同的顶部导航栏名称以及背景颜色
逍遥的码农的博客
12-03 7204
一、背景 首先是，我们知道在app.json中，有一个window属性，这个规定了全局的顶部导航栏目的显示： "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "全局导航名称", "navigationBarTextStyle": "black" }, ** 但是这里有个问题，那就是咱们
修改微信小程序顶部状态栏颜色
qq_50386946的博客
06-11 955
效果图： 代码： { "usingComponents": {}, "navigationBarTitleText": "选品库", "navigationBarTextStyle": "white", // 只能写 black 和 white "navigationStyle": "custom" // 自定义导航栏 }
微信小程序_uni-app_修改小程序顶部导航栏字体背景色和字体颜色
王大锤的博客
05-19 9382
写在前边：《微信小程序_···》系列的博文，是学习了b站《前端开发利器vue，微信小程序快速开发实战，黑马程序员前端web教程》BY黑马程序员之后，的学习笔记，这是视频地址：https://www.bilibili.com/video/BV1Sc41187nZ?p=1，该视频是讲了一个基于uni-app的项目 1 globalstyle属性 详见https://uniapp.dcloud.io/collocation/pages?id=globalstyle 这是属于uni-app的pages.json.
【微信小程序】小程序之自定义头部导航栏背景图
怎奈你何的博客
02-04 2467
一般的导航栏都是微信自定义生成的，但是有的项目项目当中感觉头部样式太过单调，不怎么好看。就设计了不要小程序头部标题栏的页面，为此找了好多方法都没有解决。最终还是让我给找到了一个解决的方法。就是在json文件当中设置一个属性“navigationStyle”：“custom”就可以只保留右上角的胶囊，完美解决这个问题了。 亲测有效，简单方便。 转自：https://blog.csdn.net/qq_37949737/article/details/89919230 ...
微信小程序自定义顶部导航栏、自定义顶部背景颜色、自定义顶部文字
呆鸟慢飞的博客
07-13 5236
微信小程序自定义顶部导航栏、自定义顶部背景颜色、自定义顶部文字 全局定义 app.json "window": { "navigationBarBackgroundColor": "#32A2FD", // 顶部背景颜色 "navigationBarTitleText": "123456", // 顶部文字 "navigationStyle": "default", // 是否自定义导航栏,当"default"为"custom"时开启自定
小程序顶部标题栏的背景图片设置
热门推荐
weixin_44514665的博客
12-03 2万+
实际运行结果为： 实现步骤 知识点讲解： 修改 navigationStyle 字段，关于这个属性，以下是官方解释： 在uniapp中 使用微信小程序开发工具开发小程序时：官方解释 操作： 此处我修改的页面是首页index.vue，我需要index的导航部分为图片背景。 所以,以下就以index.vue为例。 修改导航栏为自定义导航栏样式 修改需要配背景图片的页面路由的属性值，此...
微信小程序自定义顶部背景
weixin_46486552的博客
03-07 2255
1、将json文件文件里的navigationStyle属性值设置为custom即可自定义顶部背景 2、微信小程序中不能用本地图片作为背景图片 解决办法： 1、css中通过url获取网络图片 2、Base64编码格式 3、利用流布局，设置z-index层级，将image标签置于底层 ```bash //html <view class="container"> <image src='../image/1.jpg'></image> <view class=
微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle
05-18
微信小程序提供了 `navigationStyle` 属性来控制小程序的导航栏样式。该属性可以在 `app.json` 或页面配置中进行设置。 如果值为 `default`，则表示小程序使用默认的导航栏样式。如果值为 `custom`，则表示小程序使用自定义的导航栏样式。 当 `navigationStyle` 的值为 `custom` 时，可以通过以下方式来自定义小程序的导航栏样式： 1. 在 `app.json` 中设置全局导航栏背景色和前景色： ```json { "window": { "navigationStyle": "custom", "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black" } } ``` 2. 在页面的 `json` 文件中设置页面导航栏背景色和前景色： ```json { "navigationStyle": "custom", "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black" } ``` 3. 在页面的 `wxml` 文件中添加自定义导航栏： ```html <view class="navbar"> <view class="navbar-back" bindtap="navigateBack"> <image src="/images/icon-back.png"></image> </view> <view class="navbar-title">{{title}}</view> </view> ``` 其中，`navbar` 类指定了导航栏的样式，`navbar-back` 类指定了返回按钮的样式，`navbar-title` 类指定了标题的样式。 4. 在页面的 `wxss` 文件中定义导航栏的样式： ```css .navbar { position: fixed; top: 0; left: 0; width: 100%; height: 44px; background-color: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); z-index: 999; } .navbar-back { position: absolute; top: 50%; left: 12px; transform: translate(0, -50%); } .navbar-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: bold; } ``` 5. 在页面的 `js` 文件中添加返回按钮的逻辑： ```javascript Page({ data: { title: '自定义导航栏' }, navigateBack: function() { wx.navigateBack({ delta: 1 }) } }) ``` 以上就是在微信小程序中自定义导航栏的方法，其中 `navigationStyle` 属性用于控制小程序的导航栏样式，而自定义的导航栏需要在页面中手动添加，并在 `wxss` 文件中进行样式定义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值