微信小程序/uni-app中自定义顶部导航栏

一、项目目录结构

说明：

1、components目录用于存放自定义组件，bar是一个自定义组件，封装了小程序顶部自定义导航栏。

        1>由于顶部导航栏大多页面都需要，所以最好封装成一个组件，直接引入，这也就引发了第二个需求。

        2>有时，在一个项目中，有些页面的导航栏可能不一样，所以此时我们应该尽可能的考虑到需求，然后封装，在页面更改值来达到不同的导航栏需求。

2、pages下存放页面。

3、小程序自定义组件中不能使用app.wxss中的样式，所以组件中共用的样式、iconfont图标单独放在一个wxss文件中，然后直接引入即可~

 

二、版本

此次会给出2个版本的自定义导航栏

      1、微信小程序版本的     源码下载：https://github.com/Syleapn/wx-custom-navigation

      2、uni-app版本的    源码下载：https://github.com/Syleapn/uni-app-custom-navigation-

     其实两者差不多，只是写法上稍微有点区别，考虑到大多小伙伴初次对微信小程序熟悉，那本次就以微信小程序版本为例剖析，uni-app直接贴出代码或放到git上面下载！

 

三、分析

1、小程序自定义导航栏知识点补充

      微信小程序导航栏：由状态栏与标题栏组成

      除了状态栏与右上角胶囊外,其他区域都可由开发者控制,

      状态栏高度：由系统信息获取：statusBarHeight

      标题栏高度：ios:44px android:48px

      得到状态栏与标题栏的高度后我们可以自定义微信小程序导航栏，从而达到项目需求。

2、图片展示