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

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

  特色:

  + 灵活新高

  + 完美兼容所有手机

  + 兼容页面滚动渐现展示

  + 可指定要导好内容

## 引入组件

  在 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