微信小程序——自定义顶部菜单navigationBar方式（可详细了！）

微信小程序——自定义顶部菜单navigationBar方式（可详细了！）

前言：

在开发过程中，设计师也想出了奇思妙想。 他把小程序顶部的默认菜单改成了自己认为好看的样式，还改变了返回图标的样式，添加了返回首页、收藏夹什么的各种按钮，甚至还改了胶囊按钮全部改了~~~，好吧，我们就按照设计师的审美去改吧（胶囊按钮除外）（这篇文章文字量比较多，因为我把每一步都分得很详细，都写下来了，望客官方精品，用心产品）

要点总结：（帮助童鞋更好理解）

默认情况下，小程序占据手机顶部区域。 小程序页面内容的显示区域从底部开始，如下图。 红框圈出的是小程序的默认区域，下面灰色的是页面区域。

无法修改小程序的默认样式，例如返回按钮、标题样式。 尽管无法修改它们，但可以隐藏默认值。 通过在app.json的属性中设置：""，可以隐藏默认的。 隐藏（解决方案中有详细解释）

编写一个通用的顶部导航组件。 这个组件完全是我们自己控制的，然后我们就可以根据设计妹子的图来写布局和风格了。

引用页面中的导航组件，自定义顶部导航就完成了。

Notch 兼容调试。 我们定制的顶部导航在有刘海的手机中需要进行一些特殊的处理，否则刘海区域会遮挡导航区域（解决方案中有图片有证据）

不用了~~~，完成了！

老套路，重要解决来了↓

解决方案：

通过上面的概述，我们已经了解了小程序和页面的默认区域。 因为默认是无法修改的，所以我们首先要做的就是通过app.json中的属性来隐藏小程序的默认设置：“”，只需要在属性中保留以下两个属性即可。 le是控制右侧胶囊按钮的颜色。 您只能设置黑色/白色两个可选值。 如果不需要修改，则不需要le（注：只能在app.json中设置，并且对全局所有小程序页面生效，不能在单独的页面中设置）

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

设置好之后，我们来看看现在的小程序是什么样子的：

整个页面区域在手机上全屏显示（提示：童鞋们也发现了为什么右边的胶囊按钮没有隐藏~~是的，这个胶囊按钮无法修改或隐藏）

让我们开发一个头部组件。 在这个组件中，我们根据设计图的效果来编写布局样式。 在H5中，如果我们要开发一个顶部公共导航栏，通常我们会将顶部导航栏区域的css样式设置为：fixed;，只需将导航栏定位并浮动在浏览器顶部即可。 我们也是利用这个思路来开发小程序的。 开发通用组件的目的是为了能够在所有页面中引用一套统一的代码，这样以后需要维护和修改的时候也方便。 您还可以在不同页面引用不同的自定义顶部导航，以满足您自己的需求。

<view class="head">
	我是自定义的顶部导航
view>

.head{
	position: fixed;
	width: 100%;
	height: 30px;  //高度设置为30是因为胶囊按钮的高度就是固定的30px，所以咱们也设置成30px
	line-height: 30px;
	background: #fff;
	top: 0;
	left: 0;
}

Component({
	data: {}
})

{
  "component": true
}

{
  "pages": [
    "pages/index/index",
    "pages/test/index"
  ],
  "window": {
    "navigationBarTextStyle": "black",
	"navigationStyle":"custom"
  },
  "usingComponents":{
	  "head": "../../components/head/index"
  },
  "sitemapLocation": "sitemap.json"
}

一切都准备好了，只需要参考。 我们现在可以在页面中引用我们刚刚开发的 head 组件。 app.json中声明的名称是head，所以我们引用的时候也需要使用head，即名称可以自定义，但是引用必须一致

<head>head>

<view>
	页面内容
view>

我们先看一下目前小程序的代码布局：

head——index.js代码

Component({
	data: {
		paddingTopNum: wx.getSystemInfoSync().statusBarHeight+7  //这里为啥要+7，是因为小程序的胶囊按钮距离手机浏览器之间还有7个像素的间距，所以是为了让导航能够和胶囊按钮齐平
	}
})

head——index.wxml代码

<view class="head" style="padding-top: {{paddingTopNum}}px;">
	我是自定义的顶部导航
view>

我们看一下现在的效果：

现在有刘海的和无刘海的都有了，而且都可以与胶囊按钮齐平，这样我们的顶部导航兼容就基本完成了。

测试——index.wxml代码

<head>head>

<view class="page" style="padding-top: {{pageTopHeight}}px;">
	页面内容
view>

测试——index.js代码

Page({
  data: {
	pageTopHeight: wx.getSystemInfoSync().statusBarHeight+30+7
  },
})

我们再看一下当前页面效果：

兼职做完了，键盘坏了……你就完了！ 页面上的建议也可以放在app.js中，这样以后如果有变化，直接改这个地方就可以了。

总结：

我把所有的步骤都写出来了，大家可以按照我的步骤从上到下一步步练习。 你一定能掌握它！

↓请在下面给我点个赞——写代码不容易~谢谢客官