如何实现微信小程序自定义navigationBar顶部导航栏适配所有机型

这篇文章主要为大家展示了如何实现微信小程序自定义navigationBar顶部导航栏适配所有机型，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。

创新互联一直秉承“诚信做人，踏实做事”的原则，不欺瞒客户，是我们最起码的底线！以服务为基础，以质量求生存，以技术求发展，成交一个客户多一个朋友！为您提供成都网站设计、成都网站制作、外贸网站建设、成都网页设计、小程序定制开发、成都网站开发、成都网站制作、成都软件开发、重庆APP开发是成都本地专业的网站建设和网站设计公司，等你一起来见证！

前言

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

思路

隐藏原生样式
获取胶囊按钮、状态栏相关数据以供后续计算
根据不同机型计算出该机型的导航栏高度，进行适配
编写新的导航栏
引用到页面

正文

一、隐藏原生的navigationBar

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

"window": {
	"navigationStyle": "custom"
}

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

如何实现微信小程序自定义navigationBar顶部导航栏适配所有机型

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

二、准备工作

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

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

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();

width	height	top	right	bottom	left
宽度	高度	上边界坐标	右边界坐标	下边界坐标	左边界坐标

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

如何实现微信小程序自定义navigationBar顶部导航栏适配所有机型

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;
 },
 // 数据都是根据当前机型进行计算，这样的方式兼容大部分机器
 globalData: {
  navBarHeight: 0, // 导航栏高度
  menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
  menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）
  menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
 }
})

app.json

{
 "pages": [
  "pages/index/index"
 ],
 "window": {
  "navigationStyle": "custom"
 },
 "sitemapLocation": "sitemap.json"
}

下面为组件代码： /components/navigation-bar/navigation-bar.wxml

/components/navigation-bar/navigation-bar.json

{
 "component": true
}

/components/navigation-bar/navigation-bar.js

const app = getApp()
Component({
 properties: {
  // defaultData（父页面传递的数据-就是引用组件的页面）
  defaultData: {
   type: Object,
   value: {
    title: "我是默认标题"
   },
   observer: function(newVal, oldVal) {}
  }
 },
 data: {
  navBarHeight: app.globalData.navBarHeight,
  menuRight: app.globalData.menuRight,
  menuBotton: app.globalData.menuBotton,
  menuHeight: app.globalData.menuHeight,
 },
 attached: function() {},
 methods: {}
})

/components/navigation-bar/navigation-bar.wxss

.nav-bar{ position: fixed; width: 100%; top: 0; color: #fff; background: #000;}
.nav-bar .search{ width: 60%; color: #333; font-size: 14px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px;}

以下是调用页面的代码，也就是引用组件的页面： /pages/index/index.wxml

navigation-bar default-data="{{defaultData}}">

/pages/index/index.json

{
 "usingComponents": {
  "navigation-bar": "/components/navigation-bar/navigation-bar"
 }
}

/pages/index/index.js

const app = getApp();
Page({
 data: {
  // 组件参数设置，传递到组件
  defaultData: {
   title: "我的主页", // 导航栏标题
  }
 },
 onLoad() {
  console.log(this.data.height)
 }
})

效果图：

如何实现微信小程序自定义navigationBar顶部导航栏适配所有机型

好了，以上就是全部代码了，大家可以文中复制代码，也可以【下载源码】

，直接到开发者工具里运行，记得appid用自己的或者测试哦！

下面附几张其它小程序的效果图，大家也可以尝试照着做：

如何实现微信小程序自定义navigationBar顶部导航栏适配所有机型

以上就是关于如何实现微信小程序自定义navigationBar顶部导航栏适配所有机型的内容，如果你们有学习到知识或者技能，可以把它分享出去让更多的人看到。

网站题目：如何实现微信小程序自定义navigationBar顶部导航栏适配所有机型
网页地址：http://cqcxhl.com/article/jeppid.html

重庆分公司，新征程启航

如何实现微信小程序自定义navigationBar顶部导航栏适配所有机型

其他资讯