小程序全屏页面及自定义顶部标题栏（附getMenuButtonBoundingClientRect实现）

最新推荐文章于 2024-06-25 16:36:22 发布
最新推荐文章于 2024-06-25 16:36:22 发布
阅读量1.1w 收藏 40
点赞数 16
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/laishaojiang/article/details/103742078
版权

前段时间UI同学拿着知乎热榜小程序来问我，说现在小程序怎么这么牛皮了，居然可以把搜索栏放在顶部标题栏上面去了，然后质问我怎么不告诉她这个功能，因为她说要是早发现可以这样，她的设计就可以有很多方便的地方了。  我有种不好的预感，接下来刚上线不久的项目可以要大改  - -！

 

这是知乎热榜小程序，

 其实这并不是把搜索栏放在了顶部标题栏里面，而是把小程序把设置为全屏模式，只保留右上角的胶囊，然后顶部标题栏是自己写的模块定位上去的。 设置全屏也很简单，只需要在json文件中设置 navigationStyle:custom 即可。 全局和单个页面都可以设置。

这里面最大问题在于如何确定自定义标题栏的位置。 

目前的话有两种方法，

一，用屏幕的高度计算

上面是我用我有限的PS技术标注的一个图。。 可以明显的看出， 想要知道标题栏的高度，可以使用 屏幕高度-窗口高度-信号栏高度，即：

wx.getSystemInfo({
    success
最低0.47元/天 解锁文章
laishaojiang
关注
专栏目录
小程序开发经验分享（5）-全屏展示小程序
惠惠软件
01-05 1027
custom自定义即无navigationBar全屏），值得注意的是这个属性是在微信版本 6.6.0之后才有的（2018年2月左右，正好是我开发右侧小程序的时候）navigationBar的模式下定制化较弱，背景色只能是RGB，不带透明度，不能有背景图，如果有这种需求，就要用全屏模式；如果有navigationBar的话不仅有title和菜单，还会在页面跳转后记录跳转历史，并在右上角提供一个后退的按钮比如下图，如果全屏模式的话，就要自己维护导航历史了。游戏类的用全屏自定义，增加可操作区域。
Labview自定义标题栏并透明化界面
03-12
在LabVIEW编程环境中，创建一个具有自定义标题栏和透明化界面的应用程序是一项高级技巧，可以为用户带来更直观和个性化的交互体验。本篇将详细介绍如何实现这一功能。 首先，我们要理解LabVIEW的基本界面构造。...
wx.getMenuButtonBoundingClientRect()获取的微信小程序胶囊布局位置信息在页面上的具体展现
weixin_48009166的博客
12-14 1462
wx.getMenuButtonBoundingClientRect()获取的胶囊位置信息在实际页面具体指哪里，知道位置后可以获取手机的状态栏高度（就是手机电量那栏），经过一番加减就可以得出自己需要的自定义导航栏高度了。bottom是以胶囊最右边的像素到屏幕最上边的距离。right是以胶囊最右边的像素到屏幕最左边的距离。left是以胶囊最左边的像素到屏幕最左边的距离。top是以胶囊最上边的像素到屏幕最上边的距离。uniapp
[小程序] getMenuButtonBoundingClientRect获取胶囊frame的坑(开发工具的坑)
iOSTianNan的博客
04-22 1万+
最近需要获取小程序页面中 胶囊的 frame (y,x,w,h)等数据 可以通过wx提供的能力 var data = wx.getMenuButtonBoundingClientRect() console.log('菜单按键宽度：',data.width) console.log('菜单按键高度：',data.height) console.log('菜单按键上边...
getBoundingClientRect 方法详解
最新发布
qq_45660256的博客
06-25 254
js中getBoundingClientRect的作用详解
小程序开发API之获取菜单胶囊的布局位置信息wx.getMenuButtonBoundingClientRect()
热门推荐
M.Siebel
01-22 1万+
Object wx.getMenuButtonBoundingClientRect() 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。 wx.getMenuButtonBoundingClientRect属性 菜单按钮的布局位置信息 示例 index.wxml <button bindtap='btnClick1' type="primary">获取菜单按...
uniapp自定义导航栏 | uni.getSystemInfo() | wx.getMenuButtonBoundingClientRect()
weixin_51364974的博客
09-03 2200
一.自定义导航栏的区域 上面整体就是自定义导航栏的区域(包括状态栏) 胶囊接口 /*获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点 */ wx.getMenuButtonBoundingClientRect(); /* 返回值：width、height、top、right、bottom、left*/ 状态栏接口 wx.getSystemInfo({ success: e => { console.log(e.statusBarHeight);/*状态栏高度
uniapp自定义顶部导航并解决打包成apk后getMenuButtonBoundingClientRect方法失效问题
请叫我欧皇！的博客
01-05 1297
需求：要在app上的顶部导航提示哪里添加一些东西进去，用uniapp自带的肯定不行啊，所以自定义了所有的页面的顶部导航，之后自定义后用手机调试发现 uni.getMenuButtonBoundingClientRect()这个方法的top获取不到....网上找了很多种方法才实现，记录一下。
微信小程序自定义导航栏 胶囊菜单按钮高度完美适配
aaa123aaasqw的博客
02-27 2718
导航栏高度 = menu.statusBarHeight + menu.height + (menu.top - menu.statusBarHeight) * 2。观察发现，胶囊顶部高度距导航栏顶部高度的高度差 和 胶囊底部高度距导航栏底部高度的高度差，是一样的。这是在没有设置自定义时的原生导航栏，我们发现整体的高度就是 （状态栏高度 + 导航栏高度）上图适配做的最好的是某东，但仔细看仍会有一点错位，但输入框的颜色，淡化了这种不和谐感。也就是说 导航栏高度 = 胶囊高度 +（高度差）x 2。
【uniapp】小程序获取自定义导航高与胶囊按钮定位的两个api
ONLYSRY的博客
08-01 3912
在小程序平台，如果原生导航栏被隐藏，仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮。本API用于获取小程序下该菜单按钮的布局位置信息，方便开发者布局顶部内容时避开该按钮。.....................
微信小程序自定义扫码功能界面的实现代码
10-15
在微信小程序中，自定义扫码功能界面的实现是一项常见的需求，尤其当开发者希望提供更为个性化或集成更多功能的用户体验时。微信小程序不直接支持自定义界面的扫码功能，因此需要利用原生组件来达成目标。以下是一个...
微信小程序中顶部导航栏的实现代码
08-30
在微信小程序中，顶部导航栏（Navbar）是一个重要的UI组件，用于展示页面标题、返回按钮以及其他操作选项。本文将详细讲解如何实现一个自定义的顶部导航栏，包括样式设计、事件处理以及动态更新。 首先，微信小程序...
微信小程序实现顶部下拉菜单栏
10-17
本文将详细介绍在微信小程序中如何实现顶部下拉菜单栏。 首先需要明白的是，在微信小程序中，页面的渲染使用的是它的标记语言 WXML（WeiXin Markup Language），逻辑处理则通过 JavaScript 实现，而页面的样式则...
微信小程序电商实战-你所困扰的自定义顶部导航栏都在这里
03-29
微信自6.6.0版本之后提供了自定义底部导航栏的功能，这使得我们的全屏页面设计成为了可能  首先演示下最终的实现效果 (此图片来源于网络，如有侵权，请联系删除! )   我们实现了一个与微信之前的导航栏行为基本...
uniapp自定义导航栏
qq_40666120的博客
09-06 1079
APP中与微信小程序中使用的API不一样，下面就分别介绍一下使用方法 微信小程序 getMenuButtonBoundingClientRect() 官方解说：在小程序平台，如果原生导航栏被隐藏，仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮。本API用于获取小程序下该菜单按钮的布局位置信息，方便开发者布局顶部内容时避开该按钮。 APP uni.getSystemInfo(OBJECT) 获取系统消息 可以使用下面这个变量来获取状态栏高度 使用方法 <template> <vi
自定义导航--wx.getMenuButtonBoundingClientRect() 万机兼容
沉睡的博客
07-06 1896
官方文档： https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html 自定义导航使用此接口做css参数定位，部分机型无法获取，或者说是无法及时获取到参数，导致导航栏定位出错 采用过的方案： 每个需要自定义导航的页面重新get，不行； 默认一个...
动力商城首页（一）：仿唯品会的自定义头部导航栏（完美）
zhenghhgz的博客
07-09 2006
解决各类手机顶部自定义导航不对齐问题
【实战】前端必会 —— 微信小程序右上角胶囊按钮（标题设置透明后的处理）
程序边界
09-16 5756
wx.getMenuButtonBoundingClientRect() wx.getSystemInfoSync()
微信小程序 ---- 自定义顶部导航栏
qq_41709082的博客
11-09 1369
微信小程序 ---- 自定义顶部导航栏 需要使用到 微信小程序中的 wx.getSystemInfoSync 方法 和 wx.getMenuButtonBoundingClientRect 方法。 方法作用： wx.getSystemInfoSync(): 获取 手机系统信息。 wx.getMenuButtonBoundingClientRect():获取 胶囊按钮的尺寸，以及位置信息。 首先需要知道的是 导航栏 距离屏幕顶部 的距离就是 状态栏的高度。具体计算见下代码块： //app.js App({
去掉标题栏、信息栏和实现全屏
06-01
如果您是在编写 Android 应用程序，您可以通过以下代码实现全屏显示并隐藏标题栏和信息栏： ```java // 隐藏标题栏 ActionBar actionBar = getSupportActionBar(); if (actionBar != null) { actionBar.hide(); } // 隐藏信息栏 View decorView = getWindow().getDecorView(); int uiOptions = View.SYSTEM_UI_FLAG_FULLSCREEN; decorView.setSystemUiVisibility(uiOptions); // 实现全屏 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); ``` 如果您是在编写 Web 应用程序，您可以通过以下 CSS 样式实现全屏显示并隐藏浏览器的地址栏和工具栏： ```css html, body { height: 100%; } body { margin: 0; padding: 0; overflow: hidden; } #element { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } ``` 其中，`#element` 是要显示为全屏的元素。将其添加到 HTML 页面中，并将其内容设置为您要显示的内容即可。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值