微信小程序：自定义导航栏

一、在 app.json 的 window 对象中定义导航的样式：

这样你会发现所有页面的导航栏都不见了。如果还有其他页面需要导航栏的，那就模仿小程序的导航栏按照以下步骤。

二、首先要在 app.js 的 onLaunch 方法里面获取手机状态栏高度，全局定义导航高度 navHeight ：

注意！！！全局定义导航高度 navHeight ！！！

我发现很多人会遇到 navHeight 是 undefined 这个问题。在这里说明一下，这个 navHeight 需要在 app.json 里面定义好：

三、在需要导航的 页面 Page 拿到全局变量导航高度：

四、页面展示：

五、附上样式，可以写在 app.wxss ：

六、界面效果：

看别人的项目有这样一种设定，一进来没有导航栏只有返回按钮，胶囊颜色为黑色半透明，等滑动到一定高度以后导航栏出现，胶囊变成白色。

需要在js里面用到 wx.setNavigationBarColor，它有两个参数一起设定可以改变胶囊颜色，需要注意颜色要用十六进制

如果是指定页面胶囊颜色，之后不做改变，可以直接在json文件里面配置：

附带监听页面滚动，滑动到某一节点位置时改变胶囊颜色的方法：

我用的是自定义导航栏，需要在json里面配置一下：

在app.js里面设置全局变量navHeight，动态计算导航栏高度：

onLaunch里面：

需要自定义导航栏页面的wxml文件：

js文件:

wxss文件:

再调用监听页面滚动的方法就能动态显示隐藏导航栏。

---