小程序自定义导航栏仿原生固定在顶部

一、自定义导航栏组件

二、设置导航栏固定样式 :

此时，页面主体内容头部会有一部分被导航栏遮住在底下 ，这是因为position定位不占瀑布流空间，为解决这个问题，可以给自定义导航栏加空一个高度等于导航栏的view，以此给导航栏在页面中占位，且高度等于导航栏高度

topHeight = wx.db.statusBarHeight + wx.db.navBarHeight

完美解决！！！小程序仿原生自定义导航栏

底部固定导航栏是小程序非常普遍的一个功能，微信也很贴心，直接给我们封装好了，我们直接调用就好了。

现在我们开始实现，我们按照小程序的开发文档上面来就好了：

按照规则配置好app.json文件，功能就能顺利实现。

值得注意的就是，这个配置一定要放置到页面注册后面，不然会报错，因为导航栏是在加载好的页面中去自动生成的。

1、首先打开微信app。

2、其次在微信页面，把页面下滑到最顶端时，继续按住屏幕往下拖动，调出小程序页面。

3、最后小程序页面，上边为近期常用小程序，下部虚框中为要固定的小程序，小程序固定后，就永远不会消失了。

---