微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）_小程序头部导航栏自定义 - CSDN文库

顶部导航栏

104 浏览量更新于2023-03-16 评论 2 收藏 108KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

微信小程序自定义微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例）顶部导航栏适配所有机型（附完整案例）

主要介绍了微信小程序自定义navigationBar顶部导航栏适配所有机型（附完整案例），文中通过示例代码介绍的非常详细，对大家的学习或者工

作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言前言

navigationBar相信大家都不陌生把？今天我们就来说说自定义navigationBar，把它改变成我们想要的样子（搜索框+胶囊、搜索框+返回按钮+胶囊等）。

思路思路

隐藏原生样式

获取胶囊按钮、状态栏相关数据以供后续计算

根据不同机型计算出该机型的导航栏高度，进行适配

编写新的导航栏

引用到页面

正文正文

一、隐藏原生的一、隐藏原生的navigationBar

window全局配置里有个参数：navigationStyle（导航栏样式），default=默认样式，custom=自定义样式。

"window": {

"navigationStyle": "custom"

}

让我们看看隐藏后的效果：

可以看到原生的navigationBar已经消失了，剩下孤零零的胶囊按钮，胶囊按钮是无法隐藏的。

二、准备工作二、准备工作

1.获取胶囊按钮的布局位置信息

我们用wx.getMenuButtonBoundingClientRect() 【官方文档】获取胶囊按钮的布局位置信息，坐标信息以屏幕左上角为原点：

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();

width height top right bottom left

宽度高度上边界坐标右边界坐标下边界坐标左边界坐标

下面是官方给的示意图，方便大家理解几个坐标。

2.获取系统信息

用wx.getSystemInfoSync() 【官方文档】获取系统信息，里面有个参数：statusBarHeight（状态栏高度），是我们后面计算整个导航栏的高度需要用到的。

const systemInfo = wx.getSystemInfoSync();

三、计算公式三、计算公式

我们先要知道导航栏高度是怎么组成的，计算公式：导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度。

实例【源码下载】

自定义导航栏会应用到多个、甚至全部页面，所以封装成组件，方便调用；下面是我写的一个简单例子：

app.js

App({

onLaunch: function(options) {

const that = this;

// 获取系统信息

const systemInfo = wx.getSystemInfoSync();

// 胶囊按钮位置信息

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();

// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度

that.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;

that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;

that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;

that.globalData.menuHeight = menuButtonInfo.height;

},

// 数据都是根据当前机型进行计算，这样的方式兼容大部分机器

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

weixin_38556541

粉丝: 6
资源: 970

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈