微信小程序 ---自定義導航欄

# 微信小程序自定義導航欄

  特色:

  + 靈活新高

  + 完美兼容所有手機

  + 兼容頁面滾動漸現展示

  + 可指定要導好內容

## 引入組件

  在 page.json 中引入組件

  

``` 

    "usingComponents": {

    "nav-bar": "/components/navbar/navbar"

  }

  ```

  在 page.wxml 中引入組件

  

``` 

   <nav-bar navbar-data="{{navbarData}}" id="navBar">

      <view style="width:100rpx">自定義</view>

    </nav-bar>

  ```

  在 page.js 中配置參數

  

``` 

   data: {

    navbarData: {

      isBottom: true,  //是否需要broder

      isOpacity:true, //是否改變透明的 

      backColor:'white',  //狀態欄的默認顏色

      opacity: 0,  //導航欄透明度   --- 配合 isOpacity 一起使用

      showCapsule: 1, //左上角圖標   1.膠囊模式    2.表示自定義模式  3.表示無圖標模式

      title: '首頁', //導航欄 中間的標題

  },

  ```

## 頁面滾動漸現

在 page.js 中設置監聽

  

``` 

  //綁定navbar

 onLoad: function () {

    this.navBar = this.selectComponent("#navBar");

  },

//頁面滾動監聽

  onPageScroll:function(obj){

    const { scrollTop } = obj;

  this.navBar.initOpacity(scrollTop);

  }

  ```

## 屬性列表

屬性  類型  默認值 必填  說明

|  屬性   |  類型   |  默認值  |  必填   |   說明    |

|-------|-------|-------|-------|-------|

| isBottom | boolean | false |否|是否需要底邊|

| isOpacity | boolean | false |否|是否改變透明的 需要配合透明度一起使用|

| opacity | number | 1 |否|導航欄透明度 需要配合 isOpacity 一起使用|

| title | string | '' |否|導航欄標題|

| showCapsule | number | 3 |否|左上角圖標模式  1.膠囊模式    2.表示自定義模式  3.表示無圖標模式 |

| backColor | string | 'black' |否| 漸變模式時 狀態欄改變的顏色|

## 注意事項

 + 左側圖標默認使用iconfont 如需要修改樣式可在app.wxss 中引入;

 + 如果需要修改滾動漸變頻率可以在組件中_turnOpacity中修改tip;

 + 目前暫不支持監聽按鈕點擊事件 若需要可自行修改組件

 ## 問題更新

 + 修復了部分左上方有攝像頭的android手機 造成左膠囊樣式定位錯誤問題

 ## END

 + 如果有什么問題或意見的歡迎打擾;

 + 開發不易,希望能點個star :star: 支持 :pray::pray::pray::pray:

 

github 地址   https://github.com/huhualing/wx-navbar