正文
微信小程序——导航栏组件
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
组件内属性详解
| 属性 | 类型 | 默认值 | 必填 | 说明 |
| nav-postion | String | relative | 否 | 导航栏（包含导航栏以及状态栏）的position，可取值relative、fixed、absolute |
| nav-color | String | transparent | 否 | 导航栏（包含导航栏以及状态栏）背景色 |
| nav-bar-style | String | default | 否 | 导航栏样式，可取值为default、capsule、capsule-diy、diy |
nav-bar-title | String | 空 | 否 | 导航栏标题 |
| nav-bar-title-color | String | #222 | 否 | 导航栏标题颜色 |
bindtapCapsuleRight | eventhandle | 是 | 当 nav-bar-style 为 capsule 时候，需要用来响应点击左侧胶囊右边区域函数 |
nav-bar-style 属性
capsule-diy ：
| slot 的 name | 说明 |
| capsule-left | 自定义胶囊左侧区域 |
| capsule-right | 自定义胶囊右侧区域 |
使用案例：
.json 文件： "usingComponents": { "nav-bar":"../../components/nav-bar/nav-bar"}
.wxml文件：
<!--顶部导航栏-->
<nav-bar nav-bar-style="capsule-diy">
<view slot="capsule-left"></view>
<view slot="capsule-right"></view>
</nav-bar>
diy:
| slot 的 name | 说明 |
| navBar-diy | 导航栏左侧可自定义区域 |
使用案例：
.json 文件： "usingComponents": { "nav-bar":"../../components/nav-bar/nav-bar"}
.wxml文件：
<!--顶部导航栏-->
<nav-bar nav-bar-style="diy">
<view class="navBar-diy"></view>
</nav-bar>
组件使用详解
1.下载本组件。（组件链接）
2.打开微信小程序开发工具，在项目的根目录创建 components 文件夹，然后将解压后的组件文件夹拖动到刚刚创建的 components 文件夹下。入下图所示：
3.打开需要引用自定义导航栏的页面的 .json 文件，然后写入代码 "navigationStyle":"custom" (含义为：指定本页面为自定义导航栏页面）。
4.引入组件，同样在 .json 文件中。引入 nav-bar 组件。下图为 usingComponents 配置详解以及使用方法。
5.在页面中引入组件。在你需要的位置，引入组件。（下图箭头所指的 nav-bar 和上图 引入位置的 key 是一样的）
相关的开发案例：
