---
nav: en
---
<!--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">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/divider" target="_blank">Demo page</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 source</a>&nbsp;&nbsp;

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

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | title | <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">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/scroller-page" target="_blank">Demo page</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 source</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> | title | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">header</span> | header | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">footer</span> | footer | <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 and footer based height, dynamic calculation of scroller area height |<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">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/scroller" target="_blank">Demo page</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 source</a>&nbsp;&nbsp;

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

<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> | current pulldown and pullup status, use `v-model` for binding |
| <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> | scroller's height, you can use `height=-40` to make scroller set to height: `viewportHeight - 40px` |
| <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> | lock the horizontal direction |
| <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> | lock the vertical direction |
| <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> | if show horizontal scrollbar |
| <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> | if show vertical scrollerbar |
| <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> | if use bounce effect |
| <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> | if use pulldown plugin |
| <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> | if use pullup plugin |
| <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> | config for pulldown plugin |
| <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> | config for pullup plugin |
| <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> | where to emit event:on-scroll-bottom before reaching bottom |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | scroller content, should has only one `div` root | <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)` | emits when user scrolls | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-scroll-bottom</span> |   &nbsp; | emits when user scrolls to bottom. The event may emit multiple times, so you should use a variable for keeping status if you need fetching data | <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; | emits when scroller is on pulldown-loading status | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-pullup-loading</span> |   &nbsp; | emits when scroller is on pullup-loading status | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-scroll-start</span> |   &nbsp; | emits when scroller starts scroll | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-scroll-end</span> |   &nbsp; | emits when scroller is scroll to end | <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)` | reset scroller to reset height whenever your data is changed. easing can be one of 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; | set pullup done after new data is fetched |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">disablePullup</span> |   &nbsp; | disable pullup plugin when there is no more data |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">enablePullup</span> |   &nbsp; | enable pullup plugin |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">donePulldown</span> |   &nbsp; | set pulldown done after new data is fetched |<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">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/sticky" target="_blank">Demo page</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 source</a>&nbsp;&nbsp;

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

<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> | scroll tagget |
| <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> | if check if sticky is supported on current browser |
| <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> | top distance |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | content | <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">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/view-box" target="_blank">Demo page</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 source</a>&nbsp;&nbsp;

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

<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> | undefined |
| <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> | undefined |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">header</span> | undefined | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">default</span> | undefined | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">bottom</span> | undefined | <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)` | undefined |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">getScrollTop</span> |   &nbsp; | undefined |<span style="font-size:12px;white-space:nowrap;"></span> | 
| <span class="prop-key" style="white-space:nowrap;">getScrollBody</span> |   &nbsp; | undefined |<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">Edit document</a>&nbsp;&nbsp;
<a style="color:#0f59da;font-size:12px;text-decoration:none;" href="#" router-link="/zh-CN/demos/x-header" target="_blank">Demo page</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 source</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> | if show back text |
| <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> | the back text |
| <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> | stop go back when clicking |
| <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> | title |
| <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> | title transition |
| <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> | if show more icon |

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

|name|description|version|
|-------|-------|-------|
| <span class="prop-key" style="white-space:nowrap;">default</span> | title | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">left</span> | left slot after backText | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">right</span> | right slot | <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; | triggers when more icon is clicked | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-back</span> |   &nbsp; | triggers when left part is clicked and the prop 'left-options.preventGoBack' is true | <span style="font-size:12px;white-space:nowrap;"></span> |
| <span class="prop-key" style="white-space:nowrap;">on-click-title</span> |   &nbsp; | triggers when title is clicked | <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>



