微信小程序去掉顶部栏navigationBar

最新推荐文章于 2024-04-01 11:04:26 发布
最新推荐文章于 2024-04-01 11:04:26 发布
阅读量1.6k 收藏 1
点赞数 1
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lengjianfa/article/details/124595820
版权

在微信开发者工具的全局配置app.json中添加"navigationStyle": "custom",

在app.json中的window里添加

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "ok",

    "navigationStyle": "custom",

"navigationBarTextStyle":"black"

},

lengjianfa
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如何去掉微信小程序的自带头部，自定义创建？
lb191258514的博客
04-09 5584
一、如何去掉微信小程序的自带头部，自定义创建？ 在进行微信小程序的开发中微信小程序的头部会默认生成一个头部，用来展示每个pages页面标题，可以在app.json中的window中进行配置，但是它自身带的头部，只是能简单的配置，比如添加文字，背景颜色等等。 但是有时候这些配置无法满足我们对于头部的要求，可能我们会想添加一个图标或者进行多样化的布局，这个时候我们就要把微信小程序自带的头部移除创建自己的头部样式。 在app.json 的window中配置： "navigationStyle":"custo
微信小程序之底部栏tabBar
qq_41507093的博客
02-23 678
最近在学习微信小程序，记录一下学习情况和遇到的问题。 tabBar是微信小程序的底部导航栏，它是微信自带的一个框架。微信小程序自定义tabBar的描述 tabBar需要在app.json书写。 这是我的app.json { "pages":[ "pages/index/index", "pages/game
怎么去掉微信小程序自带的顶部标题？
m0_61629497的博客
12-19 830
如下图所示怎么清除这个顶部导航？因为我是多端的小程序，所以用的uniapp开发的，接下来以uniapp为例；顶部导航栏即可去除，在微信小程序中也是如此。
[微信小程序开发]如何去掉或隐藏小程序顶部栏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方式开发小程序>
微信小程序、钉钉小程序如何去掉导航栏
最新发布
GDNLQ的博客
04-01 527
微信小程序、钉钉小程序提供的导航栏有时候满足不了需求，这时就需要去掉默认导航栏，然后自己做一个，或者写成公共组件。
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏？三种解决办法
热门推荐
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
06-15 1万+
【代码】uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏？
uniapp H5 微信小程序 去掉顶部标题
maoge_666的博客
04-11 1728
uniapp H5 微信小程序 去掉顶部标题
uniapp开发微信小程序之隐藏头部导航栏
only_zing的博客
05-29 2979
微信小程序自定义头部导航栏、局部或全局隐藏导航栏
微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）
10-15
主要介绍了微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
[微信小程序] 自定义顶部导航栏(navigationBar)，兼容适配所有机型（完整实例）
05-25
微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（完整案例），本示例主要讲述如何隐藏掉小程序顶部导航栏，然后设置自定义navigationBar，其中涉及组件用法、参数传递、导航栏相关等，简单点来说就是将...
微信小程序实现左侧滑动导航栏
10-16
主要为大家详细介绍了微信小程序实现左侧滑动导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
uniappH5去掉页面标题
m0_67388537的博客
07-15 2518
-- 这里是状态栏 -->
小程序隐藏单个页面顶部栏
qq_34716929的博客
05-23 1454
先在app.json 中 设置 "navigationStyle":"default" "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black", "navigationStyle":"default" },
现成组件，详细教程：Uniapp去除微信小程序顶部导航栏，但保留标题和返回按钮；组件经多次调优，近乎完美
ChuanyangChen的博客
09-26 5556
这篇文章是在微信小程序原生开发的基础上设计的，但是最近又做到了Uni-app的项目，好巧不巧又得适配小程序端，顶部这个导航栏就有得折腾了。好在之前在原生上折腾过一次，这篇文章就整理一下Uni-app上如何去除这个默认样式后，依旧显示标题和返回按钮。⭕️ 注意：这里我是利用Store去存放“状态栏高度”这个变量，如果你不想用Store，想直接用全局变量也是可以的。没记错的话Uniapp自带Store，不需要安装，只需要创建store文件夹，并编写index.js 文件。至此，组件的准备工作就结束啦。
uni-app去除所有页面原生标题栏
li2406608527的博客
11-08 752
"globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uView", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", "navigationStyle": "custom" }, 在page.json文件中的globalStyle中加上"navigationStyle": “cust.
自定义全局组件：解决微信小程序元素被头部栏遮挡的问题
weixin_44582077的博客
01-26 5455
前言：用于解决微信小程序元素内容被顶部栏遮挡的问题，在不同型号手机分别撑起一定高度与头部自定义导航栏一致的盒子 1、封装一个组件（如：uni-header-box.vue） <template> //1、封装一个组件 <view :style="style" /> </template> <script> export default { data() { return { /* 设定状态栏默认高度 */ statusBarH
微信小程序（原生）——去掉原生导航栏
努力、拼搏、奋进
11-10 1664
微信小程序（原声）——去掉原生导航栏
html页面导航栏头部与浏览器顶部有空白
qq_51426429的博客
04-16 1171
*{ padding:0px; margin:0px; border:0px; } 加入此代码可以解决问题
微信小程序自定义navigationbar顶部导航栏,兼容适配所有机型
09-10
要实现微信小程序自定义navigationbar顶部导航栏的兼容适配，首先需要明确几个关键点。 1. 自定义导航栏的设计：根据产品需求和界面设计，确定导航栏的样式、背景色、标题和按钮等元素。 2. 获取手机屏幕的尺寸：小程序可以使用`wx.getSystemInfoSync()`方法获取手机屏幕的尺寸信息。 3. 设置导航栏高度：根据系统的不同，导航栏的高度也会有所差异。可以把导航栏的高度设置为一个相对较大的值，以适应大部分机型。当实际机型不同导航栏高度时，可以根据不同机型进行适配。 4. 适配不同机型的刘海屏或异形屏：对于刘海屏或者异形屏的机型，需要判断屏幕顶部是否存在刘海等异形部分，并进行相应的适配。可以使用`wx.getMenuButtonBoundingClientRect()`方法来获取右上角胶囊按钮的位置信息，从而确定导航栏背景的偏移和大小。 5. 设置页面的顶部内边距：在有自定义导航栏的情况下，为了避免导航栏遮挡页面内容，需要设置页面的顶部内边距。 6. 适配多端：微信小程序支持在不同的平台上运行，如iOS、Android、小程序开发工具等。因此要确保自定义导航栏在不同平台上的显示效果一致。 综上所述，通过了解手机屏幕尺寸、设置导航栏高度和背景、适配刘海屏、设置页面内边距以及多端适配等步骤，可以实现微信小程序自定义navigationbar顶部导航栏的兼容适配，使其在不同机型上都能够正常显示和使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值