# CapsuleBar 胶囊栏

## 介绍

CapsuleBar 称为胶囊栏，其本质是由一个自定义导航栏和胶囊构成。CapsuleBar 的胶囊样式和微信原生样式高度一致并且位置对称，默认提供返回上一页和返回首页的功能。

## 代码演示

### 引入组件

```json
{
  "usingComponents": {
    "free-capsule-bar": "/components/capsule-bar/index"
  }
}
```

### 基础用法

*注意：*自定义 navbar 的页面必须注册到 app.json，否则原生 navbar 不会去掉

```json
{
  "navigationStyle": "custom" // 开启此配置后，才可用navbar组件替换原生navbar
  // 其他配置
}
```

*注意：*组件的滚动事件需要在页面的 onPageScroll 中调用，否则不会生效

```javascript
onPageScroll(e) {
  const child = this.selectComponent('.capsule-bar');
  child.onScroll(e.scrollTop);
}
```

```html
<free-capsule-bar title="标题文字" />
```

## API

### Props

| 参数             | 说明                                                | 类型      | 默认值              | 说明 |
| ---------------- | --------------------------------------------------- | --------- | ------------------- | ---- |
| loading          | 是否显示 loading 效果 (暂无实现)                    | _boolean_ | `false`             | 选填 |
| fixed            | 是否固定在页面顶部                                  | _boolean_ | `false`             | 选填 |
| placeholder      | 是否开启占位空间 ，需要与`fixed=true`模式下结合使用 | _boolean_ | `false`             | 选填 |
| hiddenIcon       | 隐藏自定义胶囊按钮，优先级最大                      | _boolean_ | `false`             | 选填 |
| hiddenBack       | 是否显示返回按钮                                    | _boolean_ | `false`             | 选填 |
| hiddenHome       | 是否显示主页按钮                                    | _boolean_ | `false`             | 选填 |
| title            | 标题                                                | _string_  | -                   | 选填 |
| title-color      | 标题字体颜色                                        | _string_  | -                   | 选填 |
| title-position   | 标题位置 `center` `right` `left`                    | _string_  | -                   | 选填 |
| homeUrl          | 首页路径，传入此属性时，home 按钮被点击会自动跳转   | _string_  | '/pages/home/index' | 选填 |
| delta            | 返回的层级数, 设置 `-1` 则不自动跳转                | _number_  | `1`                 | 选填 |
| background       | 背景色                                              | _string_  | #fff                | 选填 |
| bufferBackground | 随着页面滚动 渐变出现的背景色                       | _string_  | -                   | 选填 |
| bufferHeight     | 渐变背景色显示完全时的页面滚动距离                  | _number_  | `44`                | 选填 |

### Slots

| 名称       | 说明                                                            |
| ---------- | --------------------------------------------------------------- |
| left       | 自定义胶囊栏，如果设置了 `hiddenIcon=true` 属性则才生效         |
| left-icon  | 自定义胶囊栏左侧图标，如果设置了 `hiddenBack=true` 属性则才生效 |
| right-icon | 自定义胶囊栏右侧图标，如果设置了 `hiddenHome=true` 属性则才生效 |
| title      | 自定义标题内容，如果设置了 `title` 属性则不生效                 |

### Events

| 事件名          | 说明                       | 回调参数 |
| --------------- | -------------------------- | -------- |
| bind:click-left | 点击自定义胶囊按钮左侧按钮 | event    |
| bind:click-back | 点击自定义胶囊按钮右侧按钮 | event    |

### 外部样式类

| 类名          | 说明                 |
| ------------- | -------------------- |
| custom-class  | 根节点样式类         |
| capsule-class | 自定义胶囊栏样式类   |
| icon-class    | 左侧自定义胶囊样式类 |
| title-class   | 标题样式类           |