编程语言
首页 > 编程语言> > 【微信小程序】自定义导航栏(二)

【微信小程序】自定义导航栏(二)

作者:互联网

微信头部导航栏可能通过json配置:
(文档:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)
在这里插入图片描述
但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
分析上图,我得到如下信息:
Android 跟 iOS 有差异,表现在顶部到胶囊按钮之间的距离差了 6pt
胶囊按钮高度为 32pt, iOS 和 Android 一致

如何计算
导航栏分为状态栏和标题栏,只要能算出每台手机的导航栏高度问题就迎刃而解

导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2 + 状态栏高度

注:由于胶囊按钮是原生组件,为表现一致,其单位在各种手机中都为 px,所以我们自定义导航栏的单位都必需是 px(切记不能用
rpx),才能完美适配。

现在具体说一下实现步骤及使用方法:
步骤:

1.在 app.json 里面把 "navigationStyle" 设置为 "custom"
这样子之后就只会保留右上角胶囊按钮了。
在这里插入图片描述
2.计算相关值

因为在不同的手机型号头部那条栏目高度可能不一致,所以为了我们适配更多型号,我们需要计算3个值:

如下图:
在这里插入图片描述

  1. 整个导航栏的高度;

  2. 胶囊按钮与顶部的距离;

  3. 胶囊按钮与右侧的距离。

小程序可以通过 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的信息  和 wx.getSystemInfo() 获取设备信息。

如下图:
在这里插入图片描述
通过这些信息我们可以计算出上面说的3个值:

  1. 整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )*2;

  2. 胶囊按钮与顶部的距离 = top;

  3. 胶囊按钮与右侧的距离 = windowWidth - right。

实例:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

标签:状态栏,自定义,微信,胶囊,高度,按钮,导航
来源: https://blog.51cto.com/15142266/2690566