微信小程序、钉钉小程序如何去掉导航栏

于 2024-04-01 11:04:26 发布
阅读量592 收藏 5
点赞数 4
文章标签： 小程序 微信小程序 钉钉
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GDNLQ/article/details/137221755
版权
本文介绍了如何在微信和钉钉小程序中，分别通过设置`navigationStyle`和`transparentTitle`,`titlePenetrate`属性来实现导航栏的自定义或部分透明，尽管钉钉小程序官方不支持完全去掉导航栏。
摘要由CSDN通过智能技术生成

微信小程序、钉钉小程序提供的导航栏有时候满足不了需求，这时就需要去掉默认导航栏，然后自己做一个，或者写成公共组件

微信小程序

        在页面配置json文件添加  官方地址

"navigationStyle":"custom",

  

钉钉小程序（第三方企业应用）

        官方地址（可以设置导航栏背景色、标题、图表等）

        实际上官方是不允许去掉导航栏，并且也没有提供相关的方法            

        但是可以这么设置一下    在页面json配置文件里面添加

"transparentTitle": "always", //设置导航栏透明
 "titlePenetrate": "YES"//设置导航栏穿透

           实际上导航栏还在，但是不影响操作

        

前端创新者
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序自定义头部标题导航栏
05-24
* noSticky: 取消导航栏粘性布局(不占头部导航栏位置)，默认不取消 * opacity: 导航栏透明度，默认1不透明 * showNavBtn: 是否显示左侧导航按钮，默认true显示 * navIcon: 用户自定义导航按钮图标路径 * ...
小程序页面顶部标题栏、导航栏navigationBar如何隐藏、变透明？
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-10 5723
小程序顶部的白色背景条就不见了，直接变透明，只剩下右上角的胶囊按钮。
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏？三种解决办法
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
06-15 1万+
【代码】uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏？
怎么去掉微信小程序自带的顶部标题？
m0_61629497的博客
12-19 923
如下图所示怎么清除这个顶部导航？因为我是多端的小程序，所以用的uniapp开发的，接下来以uniapp为例；顶部导航栏即可去除，在微信小程序中也是如此。
微信小程序去掉顶部栏navigationBar
lengjianfa的博客
05-05 1654
在微信开发者工具的全局配置app.json中添加"navigationStyle": "custom", 在app.json中的window里添加 "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "ok", "navigationStyle":"custom", "navigationBarTextStyle":"bl...
uniapp 微信小程序 去除顶部导航栏 变透明
weixin_44950209的博客
08-02 3303
微信小程序 去除导航栏
小程序的状态栏、导航条、标题、窗口背景色的设置
The One Who's at the Front
06-14 6123
关于小程序导航顶部配置都写在.json文件中。 相关属性及属性值 属性 类型 默认值 描述 最低版本 navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如"#000000" navigationBarTextStyle String white 导航栏标题颜色，仅支持black/white\color{red}{导航栏...
微信小程序 实例汇总 完整项目源代码
11-01
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要针对移动设备，尤其是智能手机。它允许开发者在微信内创建原生体验的应用程序，无需通过应用商店即可供用户使用。这个压缩包文件“wechat”很可能包含了...
微信小程序-顶部导航栏TopBar.zip
10-08
在这个"微信小程序-顶部导航栏TopBar.zip"压缩包中，我们主要关注的是如何在微信小程序中实现一个可滑动的顶部导航栏。 顶部导航栏（TopBar）是用户界面设计中的一个重要元素，通常用于展示应用的当前页面或功能，...
uniapp关于支付宝小程序或钉钉小程序标题栏自定义.txt
12-30
uniapp关于支付宝小程序或钉钉小程序标题栏自定义
微信小程序商城系统源码
最新发布
04-25
微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)微信小程序 商城 (源码)...
微信小程序 vs 支付宝小程序（钉钉小程序） 区别 api大全
dazer的专栏
09-08 4823
钉钉小程序简介 参考系列文章 钉钉小程序&微应用
【小程序】微信小程序取消全局或单个页面的标题栏
LuviaWu的博客
06-21 5073
1、取消全部标题栏： 在app.json里的window加上：navigationStyle:custom 。顶部导航栏就会消失,保留右上角胶囊状的按钮 "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#444", "navigationBarTitleText": "小程序名字", "navigationBarTextStyle": "white", "na
钉钉内嵌h5页面隐藏钉钉右上角图标
qqtang1406722832的博客
07-30 838
钉钉内嵌h5页面隐藏右上角图标
钉钉隐藏右上角按钮
weixin_44706621的博客
07-06 1362
钉钉隐藏右上角按钮 因为钉钉自带的分享功能，现在需求目标不需要又因为兼容性问题，所以最终找到这个方法 首先引入 钉钉官网js <script src="//g.alicdn.com/dingding/dingtalk-jsapi/2.0.8/dingtalk.open.js"></script> 下面是实现去除右上角代码 <script type="text/javascript"> if (dd.ios || dd.android || dd.pc) {///如果
微信小程序 去除自带头部导航栏
alokka的博客
08-03 7688
我在用凯悦的微信小程序订酒店的时候 发现他们的小程序是没有头部导航栏的 当时我还有点奇怪 我很长时间没接触过微信小程序项目了 还以为这种效果需要腾讯定制 后来我自己做小程序 想着也用用这个效果 感觉整体画面会很清爽 就百度了一下 其实很简单 在 app.json 配置中，在 “window” 中直接设置 “navigationStyle”: “custom”，就可以了 ...
小程序webview去掉顶部导航 顶部导航颜色设置
Neil_1993的博客
04-01 6131
"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#000000", "navigationBarTitleText": "", "navigationStyle": "custom", "navigationBarTextStyle": "black...
微信小程序入门四: 导航栏样式、tabBar导航栏
热门推荐
王乐平 技术博客
01-12 13万+
实例内容 导航栏样式设置 tabBar导航栏 实例一：导航栏样式设置小程序的导航栏样式在app.json中定义。这里设置导航，背景黑色，文字白色，文字内容测试小程序app.json内容：{ "pages":[ "pages/index/index", "pages/login/login", "pages/logs/logs" ], "window":{
微信小程序去除顶部导航栏
07-28
要去除微信小程序的顶部导航栏，可以按照以下步骤进行操作。首先，在app.json配置文件中设置页面的导航栏样式为custom，即"navigationStyle": "custom"。这样可以自定义导航栏，只保留右上角的胶囊状按钮。请注意，这个设置只在app.json中生效。\[2\] 接下来，需要计算导航栏的高度，以确保页面的布局不会因为导航栏的去除而出现高度不一致的情况。可以通过获取系统信息的API来获取导航栏的高度，并在页面布局中进行相应的调整。 最后，根据设计需求确定标题文字的位置，可以去掉顶部的黑色背景，使导航栏看起来更加美观。可以通过修改页面的样式文件来实现这一效果。 需要注意的是，如果要兼容低版本的微信客户端，需要在开发者工具中将基础库版本切换到1.7.0，并进行兼容性测试。\[3\] 通过以上步骤，就可以去除微信小程序的顶部导航栏，并根据需要进行自定义样式的设置。 #### 引用[.reference_title] - *1* [微信小程序自定义顶部导航栏](https://blog.csdn.net/w96098/article/details/120204660)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [小程序如何删除或隐藏头部导航栏，实现全屏](https://blog.csdn.net/weixin_33941350/article/details/92504556)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值