---
nav: default
---
<!--THIS FILE IS AUTOGENERATED, DONOT EDIT IT-->
## layout

---

### Divider
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/divider/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/divider" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/divider" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Divider.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { Divider } from 'cvux'
```

<p class="tip">
不支持配置分割线颜色，因为线条是通过图片来实现的。好处是在任何背景颜色下都可以适应。如果需要配置颜色，请使用<a href="#" jump-to-id="loadmore">`load-more`</a>组件。
</p>

``` html
<divider>我是有底线的</divider>
```


<span class="vux-props-title">Slots</span>

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | 分隔线标题 | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/divider">Demo page</a>





---

### ScrollerPage
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/scroller-page/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/scroller-page" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/scroller-page" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/ScrollerPage.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { ScrollerPage } from 'cvux'
```

<span class="vux-props-title">Slots</span>

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | 滚动区域内容 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">header</span> | 头部内容 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">footer</span> | 底部内容 | <span style="font-size:12px;white-space:nowrap;"></span> |

<span class="vux-props-title">Methods</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">computeHeight</span> |   &nbsp; | 基于 header 和 footer 的高度，动态计算 scroller 区域高度 |<span style="font-size:12px;white-space:nowrap;"></span> | 


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/scroller-page">Demo page</a>

<p class="tip">
如需动态控制 header 或 footer 显示状态，需要在 dom 更新完毕之后，调用组件的 computeHeight 方法重新计算 scroller 区域高度。
</p>

``` js
this.$nextTick(() => {
  this.$refs.scrollerPage.computeHeight()
})
```






---

### Scroller
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/scroller/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/scroller" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/scroller" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Scroller.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { Scroller } from 'cvux'
```

<p class="warning">
该组件已经不再维护，也不建议使用，大部分情况下也不需要用到该组件。
<br>
建议使用第三方相关组件，相关 issue 将不会处理。
</p>

<p class="warning">
`Scroller`的内容必须是一个`div`，并且只能有一个`div`
<br>
`Scroller` 希望解决的是简单的列表问题而不是一个内嵌各种复杂标签交互的容器，很容易发生性能或者交互问题。
<br>
<br>
默认高度为整个视口高度，如果你加了`x-header`，那么你需要减去一个`x-header`的高度: `height="-46"`

<br>
<br>
请确保在你的数据更新后进行`reset`操作(参考下面文档)，如果你做了`reset`还有问题再开`issue`并附上代码，否则将`绝对不会被处理`。
</p>


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">value</span> | <span class="type type-object">Object</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 对象，上拉或者下拉的状态双向绑定，使用 v-model 绑定，pulldownStatus 及 pullupStatus |
| <span class="prop-key" style="white-space:nowrap;">height</span> | <span class="type type-string">String</span> | viewport height | <span style="font-size:12px;white-space:nowrap;"></span> | 容器高度，默认为整个viewport高度，注意，该属性接受的是 String 类型，比如 200px，如果你希望scroller自动计算除去头部尾部的高度，请这样设置让组件自动计算，如`height="-40"`。（推荐使用 ScrollerPage 组件，避免高度计算的麻烦，组件使用参考其 demo） |
| <span class="prop-key" style="white-space:nowrap;">lock-x</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 锁定X方向 |
| <span class="prop-key" style="white-space:nowrap;">lock-y</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 锁定Y方向 |
| <span class="prop-key" style="white-space:nowrap;">scrollbar-x</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否显示横向滚动条 |
| <span class="prop-key" style="white-space:nowrap;">scrollbarY</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否显示垂直方向滚动条 |
| <span class="prop-key" style="white-space:nowrap;">bounce</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | 是否显示边缘回弹效果 |
| <span class="prop-key" style="white-space:nowrap;">use-pulldown</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否使用下拉组件 |
| <span class="prop-key" style="white-space:nowrap;">use-pullup</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否使用上拉组件 |
| <span class="prop-key" style="white-space:nowrap;">pulldown-config</span> | <span class="type type-object">Object</span> | see below | <span style="font-size:12px;white-space:nowrap;"></span> | 下拉组件配置 |
| <span class="prop-key" style="white-space:nowrap;">pullup-config</span> | <span class="type type-object">Object</span> | see below | <span style="font-size:12px;white-space:nowrap;"></span> | 上拉组件配置 |
| <span class="prop-key" style="white-space:nowrap;">scroll-bottom-offset</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;">v2.2.1-rc.6</span> | 在距离底部多长距离时触发事件 on-scroll-bottom |

<span class="vux-props-title">Slots</span>

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | scroller 内容，必须是一个 `div` 元素 | <span style="font-size:12px;white-space:nowrap;"></span> |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-scroll</span> |   `(position)` | 容器滚动时触发，参数为`top`和`left`位置 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-scroll-bottom</span> |   &nbsp; | 滚动到底部时触发，注意事件会触发多次，如果你需要进行数据获取，记得设置一个状态值 | <span style="font-size:12px;white-space:nowrap;">v2.2.1-rc.6</span> |
| <span class="prop-key" style="white-space:nowrap;">on-pulldown-loading</span> |   &nbsp; | 用户触发下拉刷新状态，监听该事件以获取加载新数据 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-pullup-loading</span> |   &nbsp; | 用户触发上拉加载状态，监听该事件以加载新数据 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-scroll-start</span> |   &nbsp; | 滚动开始时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-scroll-end</span> |   &nbsp; | 滚动结束时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |

<span class="vux-props-title">Methods</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">reset</span> |   `(position, duration, easing)` | 在内容变化(v-for渲染，异步数据加载)后需要调用，用以重新渲染，避免新加的内容无法上拉看到，一般在 $nextTick 回调里调用。easing 可以为 ease-in, ease-in-out, ease, bezier(n, n, n, n) |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">donePullup</span> |   &nbsp; | 设置上拉刷新操作完成，在数据加载后执行 |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">disablePullup</span> |   &nbsp; | 禁用上拉刷新，在没有更多数据时执行 |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">enablePullup</span> |   &nbsp; | 启用上拉刷新插件 |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">donePulldown</span> |   &nbsp; | 设置下拉刷新操作完成，在数据加载后执行 |<span style="font-size:12px;white-space:nowrap;"></span> | 


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/scroller">Demo page</a>

pulldown 默认配置:

``` js
{
  content: 'Pull Down To Refresh',
  height: 60,
  autoRefresh: false,
  downContent: 'Pull Down To Refresh',
  upContent: 'Release To Refresh',
  loadingContent: 'Loading...',
  clsPrefix: 'xs-plugin-pulldown-'
}
```

pullup 默认配置:

``` js
{
  content: 'Pull Up To Refresh',
  pullUpHeight: 60,
  height: 40,
  autoRefresh: false,
  downContent: 'Release To Refresh',
  upContent: 'Pull Up To Refresh',
  loadingContent: 'Loading...',
  clsPrefix: 'xs-plugin-pullup-'
}
```

<span class="vux-qa">QA 如何更新数据</span>

如果展示内容只是简单的增加或者减少，直接调用`reset`方法即可

``` js
this.$nextTick(() => {
  this.$refs.scroller.reset()
})
```

如果展示内容完全重载，那么需要主动设置位置让其能正确回到顶部。适用于改变筛选条件后重载数据的情况

``` js
this.$nextTick(() => {
  this.$refs.scroller.reset({
    top: 0
  })
})
```

<span class="vux-qa">QA 如何设置pullup完成</span>

方法1，直接调用on-pullup-loading绑定事件的回调，传参数time 表示延时time执行，不传参数表示立即执行

``` js
<scroller 
  lock-x scrollbar-y 
  use-pullup 
  @on-pullup-loading="loadMore">
</scroller>
...
...
methods: {
  loadMore(done) {
    ...
    done(100)
  } 
}
```
方法2，直接调用ref的`donePullup`方法

``` js
this.$refs.demo2.donePullup()
```

方法3，绑定value, 重置状态

<p class="tip">自定义pullup模板同样是用v-model来绑定以获取状态变化</p>

``` html
<scroller v-model="status"></scroller>
```

``` js
data () {
  return {
    status: {
      pullupStatus: 'default'
    }
  }
}
```

```
// 重置状态为default
this.status.pullupStatus = 'default
```

<span class="vux-qa">QA 如何设置pulldown完成</span>

参照`pullup`, 使用方法`donePulldown`或者绑定`pulldownStatus`然后重置为`default`。

<span class="vux-qa">QA 如何禁用或者启用pullup</span>

在有些情况下，比如数据不多不需要上拉加载或者已经加载完成，我们需要禁用pullup
同样可以调用方法 `disablePullup` 或者设置`pullupStatus`为`disabled`

反之，则调用方法 `enablePullup` 或者设置`pullupStatus`为`enabled`

<span class="vux-qa">启用keep-alive后滚动有问题</span>

需要在调用Scroller的页面上在 hook: `activated`上执行`reset`

``` js
activated () {
  this.$refs.scroller.reset()
}
```






---

### Sticky
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/sticky/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/sticky" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/sticky" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/Sticky.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { Sticky } from 'cvux'
```

<p class="tip">在Chrome模拟器运行时你可能会发现没有效果，这是因为Chrome并不支持原生sticky实现而模拟器环境是iPhone，目前程序是根据Safari版本来判断是否原生支持sticky。因此你可以切换到Android系统进行测试，但是真机上是完全正常的交互。
<br>
<br>
你也可以设置禁用原生支持检测以获得相同的效果：`:check-sticky-support="false"`
</p>

如果你没有使用`100%`的布局，也没有头部可以直接这样使用
``` html
<sticky>
  <div>Blabla</div>
</sticky>
```

如果你像demo一样使用`view-box`和`x-header`，那么需要这样：

``` html
<sticky scroll-box="vux_view_box_body" :offset="46">
  <div>Blabla</div>
</sticky>
```

建议外围加一个`div`高度为内容高度，这样可以避免当定位为`sticky`时下面的元素会突然向上走。

``` html
<div style="height:44px;">
  <sticky scroll-box="vux_view_box_body" :offset="46">
    <div>Blabla</div>
  </sticky>
</div>
```

<p class="warning">
请不要直接照抄 demo 代码，滚动容器为 window 时请不要指定 scroll-box，滚动容器并非使用 `view-box` 时 id 并不是 `vux_view_box_body`，请按照实际情况来设定。
</p>


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">scroll-box</span> | <span class="type type-string">String</span> | window | <span style="font-size:12px;white-space:nowrap;"></span> | 滚动容器，默认为`window`，如果你使用了viewbox，那么你需要指定容器id：`vux_view_box_body` |
| <span class="prop-key" style="white-space:nowrap;">check-sticky-support</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | 是否检测当前浏览器是否支持sticky特性，禁用则在`iPhone`设置上也使用`scroll`实现 |
| <span class="prop-key" style="white-space:nowrap;">offset</span> | <span class="type type-number">Number</span> | 0 | <span style="font-size:12px;white-space:nowrap;"></span> | 距离顶部高度，在存在头部（如使用了`x-header`）的情况下需要设置一个距离 |

<span class="vux-props-title">Slots</span>

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | 内容插槽 | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/sticky">Demo page</a>





---

### ViewBox
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/view-box/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/view-box" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/view-box" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/ViewBox.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { ViewBox } from 'cvux'
```


该组件为`100%高`布局，可以解决部分键盘输入的问题，但是同时会在safari中出现向下滚动时无法自动隐藏url工具栏和底部栏的问题。

在`viewBox`里元素定位为`absolute`，效果等同于`fixed`。

使用时需要设置 html, body 高为100%:

  ``` css
  html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }
  ```

 view-box`所有父div`也需要为100%高度：

 ``` html
 <div style="height:100%;">
   <view-box ref="viewBox">
     <x-header slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;"></x-header>
     <router-view></router-view>
     <tabbar slot="bottom"></tabbar>
   </view-box>
 </div>
 ```

如果你想保存滚动距离，推荐使用`vuex`实现，在特定`path`对`scrollBody`监听`scroll`事件，并获取滚动距离保存到`vuex`的`state`里。示例可以参考vux源码的`App.vue`


<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">body-padding-top</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 主体的`padding-top`值，当顶部存在`x-header`等`absolute`定位元素时需要设置 |
| <span class="prop-key" style="white-space:nowrap;">body-padding-bottom</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 主体的`padding-bottom`值，当底部存在`tabbar`等`absolute`定位元素时需要设置 |

<span class="vux-props-title">Slots</span>

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">header</span> | 顶部区域，如果要使用统一的XHeader，可以使用该slot | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">default</span> | 主体内容，可滚动的区域 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">bottom</span> | 底部区域，Tabbar可以使用该slot | <span style="font-size:12px;white-space:nowrap;"></span> |

<span class="vux-props-title">Methods</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">scrollTo</span> |   `(top)` | 滚动到指定位置 |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">getScrollTop</span> |   &nbsp; | 获取当前滚动距离 |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">getScrollBody</span> |   &nbsp; | 获取滚动`div`, 也可以直接用组件引用的`.$refs.viewBoxBody` |<span style="font-size:12px;white-space:nowrap;"></span> | 


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/view-box">Demo page</a>





---

### XHeader
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/components/x-header/metas.yml" target="_blank">编辑文档</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/x-header" target="_blank">进入demo页面</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="demo/#/component/x-header" target="_blank">demo 原始链接</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="https://gitlab.lixinio.com/frontend/cvux/tree/master/src/demos/XHeader.vue" target="_blank">demo源码</a>&nbsp;&nbsp;

``` js
import { XHeader } from 'cvux'
```

<span class="vux-props-title">Props</span>

|name|type|default|version|description|
|-------|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">left-options.showBack</span> | <span class="type type-boolean">Boolean</span> | true | <span style="font-size:12px;white-space:nowrap;"></span> | 是否显示返回文字 |
| <span class="prop-key" style="white-space:nowrap;">left-options.backText</span> | <span class="type type-string">String</span> | Back | <span style="font-size:12px;white-space:nowrap;"></span> | 返回文字 |
| <span class="prop-key" style="white-space:nowrap;">left-options.preventGoBack</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否阻止返回 |
| <span class="prop-key" style="white-space:nowrap;">title</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 标题 |
| <span class="prop-key" style="white-space:nowrap;">transition</span> | <span class="type type-string">String</span> |  | <span style="font-size:12px;white-space:nowrap;"></span> | 标题出现的动画 |
| <span class="prop-key" style="white-space:nowrap;">right-options.showMore</span> | <span class="type type-boolean">Boolean</span> | false | <span style="font-size:12px;white-space:nowrap;"></span> | 是否显示右侧的更多图标 |

<span class="vux-props-title">Slots</span>

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | 标题 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">left</span> | 左侧部分插槽，在返回文字后，不会影响到原有的图标 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">right</span> | 右侧部分插槽 | <span style="font-size:12px;white-space:nowrap;"></span> |

<span class="vux-props-title">Events</span>

|name|params|description|version|
|-------|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">on-click-more</span> |   &nbsp; | 点击右侧更多时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-back</span> |   &nbsp; | 当left-options.preventGoBack为true,点击左边返回时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-title</span> |   &nbsp; | 点击标题时触发 | <span style="font-size:12px;white-space:nowrap;"></span> |


<a class="vux-demo-link" href="#" router-link="/zh-CN/demos/x-header">Demo page</a>



