微信小程序 去除自带头部导航栏

最新推荐文章于 2024-12-24 17:45:04 发布
最新推荐文章于 2024-12-24 17:45:04 发布
阅读量8.1k 收藏 3
点赞数 3
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alokka/article/details/107757044
版权

我在用凯悦的微信小程序订酒店的时候 发现他们的小程序是没有头部导航栏的 当时我还有点奇怪 我很长时间没接触过微信小程序项目了 还以为这种效果需要腾讯定制 后来我自己做小程序 想着也用用这个效果 感觉整体画面会很清爽 就百度了一下 其实很简单
在这里插入图片描述

在 app.json 配置中，在 “window” 中直接设置 “navigationStyle”: “custom”，就可以了
在这里插入图片描述

在这里插入图片描述

微信小程序 页面除去头部和底部，中间高度铺满剩余部分的解决方案
qq_38337245的博客
11-15 4730
做这么一个界面，让中间紫色和橙色部分的内容铺满在中间位置，并且让橙色部分位置固定不动，紫色部分内容超出时滚动，如图： 首先如何做到呢？ 我使用了定位position：fiexed;让它撑满（关键代码）， position: fixed;top: {{topHeight + 30}}rpx;left: 25rpx;right: 25rpx;bottom:30rpx; 然后通过计...
如何去掉微信小程序的自带头部，自定义创建？
lb191258514的博客
04-09 6306
一、如何去掉微信小程序的自带头部，自定义创建？ 在进行微信小程序的开发中微信小程序的头部会默认生成一个头部，用来展示每个pages页面标题，可以在app.json中的window中进行配置，但是它自身带的头部，只是能简单的配置，比如添加文字，背景颜色等等。 但是有时候这些配置无法满足我们对于头部的要求，可能我们会想添加一个图标或者进行多样化的布局，这个时候我们就要把微信小程序自带的头部移除创建自己的头部样式。 在app.json 的window中配置： "navigationStyle":"custo
怎么去掉微信小程序自带的顶部标题？
m0_61629497的博客
12-19 2207
如下图所示怎么清除这个顶部导航？因为我是多端的小程序，所以用的uniapp开发的，接下来以uniapp为例；顶部导航栏即可去除，在微信小程序中也是如此。
去掉微信小程序顶部
yjdyyds的博客
12-22 571
"navigationStyle":"custom", JSON
微信小程序：去除自带顶部导航栏
彭世瑜的博客
07-09 6268
app.json 全局设置 "window": { "navigationStyle": "custom", } page.json 局部设置 "navigationStyle": "custom",
微信小程序（原生）——去掉原生导航栏
努力、拼搏、奋进
11-10 1818
微信小程序（原声）——去掉原生导航栏
微信小程序 自定义顶部导航栏标题 navigationStyle
撑戌圆爱痒生
07-29 1273
微信小程序 自定义顶部导航栏标题修改需要自定义的页面.json文件在需要自定义的页面进行添加导航栏设置样式即可 修改需要自定义的页面.json文件 { "usingComponents": {},//原自带 "navigationStyle":"custom"//加上这条就可以自定义顶部导航栏了(将原来的页面导航去掉) } 在需要自定义的页面进行添加导航栏设置样式即可 ...
记录--优雅解决uniapp微信小程序右上角胶囊菜单覆盖问题
gcyaozuodashen的博客
10-21 1513
大家好，今天聊一下在做uniapp多端适配项目，需要用到自定义导航时，如何解决状态栏塌陷及导航栏安全区域多端适配问题，下文只针对H5、APP、微信小程序三端进行适配，通过封装一个通用高阶组件包裹自定义导航栏内容，主要是通过设置padding来使内容始终保持在安全区域，达到低耦合，可复用性强的效果。
微信小程序自定义导航栏兼容适配所有机型
青年码农
11-01 752
目前小程序已在前端占了一席之地，最近公司项目上用的就是小程序开发，由于功能及页面不是很多，所以直接原生开发，毕竟坑可能会少点，在开发过程中，小程序自带导航栏和客户的设计稿导航栏排在一起，感觉很别扭，因此要求去掉微信的自带导航栏，微信提供了这方面的api，接下来我们就实操。这是小程序官方文档截图，可以看到导航栏样式支持两种，默认是带导航栏，另外一种是自定义导航栏-custo...
微信小程序 自定义导航栏
全网同名：PBitW！ 可以去掘金关注我！
05-25 1905
这个功能就需要把微信自带的导航栏样式给去掉，使用自定义导航栏样式，但是这个又产生一个问题，导航栏标题文字就不是很好适配了，因为不同手机型号，距离最上面的距离是不同的！最近菜鸟做微信小程序，然后有一个图片置顶的功能。
[微信小程序开发]如何去掉或隐藏小程序顶部栏navigationBar
03-29
小程序全局配置app.josn增加选项："navigationStyle": "custom", 具体如下： 原生小程序开发 打开 app.json：   { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#000", "navigationStyle": "custom", "navigationBarTitleText": "WeChat" } } mpvue方式开发小程序>
微信小程序去掉navigationBar
judicator0301的博客
01-20 2080
去掉指定页面的navigationBar 就在指定页面的json配置文件中navigationStyle设置为custom "navigationStyle": "custom"
uniapp H5 微信小程序 去掉顶部标题
maoge_666的博客
04-11 2033
uniapp H5 微信小程序 去掉顶部标题
uniapp微信小程序项目，怎样让去掉页面顶部栏和title呢？或者怎样给顶部栏设置颜色？
最新发布
南北极之间
12-24 1311
uniapp微信小程序项目，怎样让去掉页面顶部栏和title呢？或者怎样给顶部栏设置颜色？uniapp微信小程序项目，怎样让去掉页面顶部栏和title呢？或者怎样给顶部栏设置颜色？uniapp微信小程序项目，怎样让去掉页面顶部栏和title呢？或者怎样给顶部栏设置颜色？uniapp微信小程序项目，怎样让去掉页面顶部栏和title呢？或者怎样给顶部栏设置颜色？uniapp微信小程序项目，怎样让去掉页面顶部栏和title呢？或者怎样给顶部栏设置颜色？uniapp微信小程序项目，怎样让去掉页面顶部栏和title呢
小程序webview去掉顶部导航 顶部导航颜色设置
Neil_1993的博客
04-01 6447
"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#000000", "navigationBarTitleText": "", "navigationStyle": "custom", "navigationBarTextStyle": "black...
微信小程序web-view组件嵌入h5页面导致双导航栏，如何只保留其中一个？
铁锤妹妹的博客
12-13 7196
前提 已知存在一个微信小程序，该小程序的某个页面通过web-view组件嵌套了我们app的一个h5页面，h5页面本身有自己的导航栏，就导致了双导航栏。 由于uniapp的 web-view 组件一定有原生导航栏，pages.js中设置navigationStyle: custom 对 web-view 组件无效；所以只能去掉因为h5里的导航。 方案 h5里的导航现在有两个地方在使用，一个需要保留导航栏，另一个也就是小程序中需要去掉h5的导航栏，所以需要条件判断，在使用web-view 组件项目中的页面src
uniapp开发微信小程序之隐藏头部导航栏
only_zing的博客
05-29 3567
微信小程序自定义头部导航栏、局部或全局隐藏导航栏
微信小程序去掉顶部栏navigationBar
lengjianfa的博客
05-05 1725
在微信开发者工具的全局配置app.json中添加"navigationStyle": "custom", 在app.json中的window里添加 "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "ok", "navigationStyle":"custom", "navigationBarTextStyle":"bl...
去掉Activity的头部标题栏
盘古大叔
11-13 1132
AndroidManifest.xml文件 <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" >修改为如下代码，即可去头部标题栏 <a
微信小程序自定义头部导航栏的实现方法
在微信小程序开发中，"自定义头部导航栏"是指开发者可以不使用微信提供的默认导航栏样式，而是自行设计导航栏的外观和功能。在这一过程中，"navigationStyle"是指微信小程序的页面配置选项，通过设置该选项可以使得...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值