--- nav: en --- ## layout --- ### Divider Edit document Demo page demo 原始链接 Demo source ``` js import { Divider } from 'cvux' ``` Slots |name|description|version| |-------|-------|-------| | default | title | | Demo page --- ### ScrollerPage Edit document Demo page demo 原始链接 Demo source ``` js import { ScrollerPage } from 'cvux' ``` Slots |name|description|version| |-------|-------|-------| | default | title | | | header | header | | | footer | footer | | Methods |name|params|description|version| |-------|-------|-------|-------| | computeHeight | | Header and footer based height, dynamic calculation of scroller area height | | Demo page

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

``` js this.$nextTick(() => { this.$refs.scrollerPage.computeHeight() }) ``` --- ### Scroller Edit document Demo page demo 原始链接 Demo source ``` js import { Scroller } from 'cvux' ``` Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | value | Object | | | current pulldown and pullup status, use `v-model` for binding | | height | String | viewport height | | scroller's height, you can use `height=-40` to make scroller set to height: `viewportHeight - 40px` | | lock-x | Boolean | false | | lock the horizontal direction | | lock-y | Boolean | false | | lock the vertical direction | | scrollbar-x | Boolean | false | | if show horizontal scrollbar | | scrollbarY | Boolean | false | | if show vertical scrollerbar | | bounce | Boolean | true | | if use bounce effect | | use-pulldown | Boolean | false | | if use pulldown plugin | | use-pullup | Boolean | false | | if use pullup plugin | | pulldown-config | Object | see below | | config for pulldown plugin | | pullup-config | Object | see below | | config for pullup plugin | | scroll-bottom-offset | Number | 0 | v2.2.1-rc.6 | where to emit event:on-scroll-bottom before reaching bottom | Slots |name|description|version| |-------|-------|-------| | default | scroller content, should has only one `div` root | | Events |name|params|description|version| |-------|-------|-------|-------| | on-scroll | `(position)` | emits when user scrolls | | | on-scroll-bottom | | 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 | v2.2.1-rc.6 | | on-pulldown-loading | | emits when scroller is on pulldown-loading status | | | on-pullup-loading | | emits when scroller is on pullup-loading status | | | on-scroll-start | | emits when scroller starts scroll | | | on-scroll-end | | emits when scroller is scroll to end | | Methods |name|params|description|version| |-------|-------|-------|-------| | reset | `(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) | | | donePullup | | set pullup done after new data is fetched | | | disablePullup | | disable pullup plugin when there is no more data | | | enablePullup | | enable pullup plugin | | | donePulldown | | set pulldown done after new data is fetched | | Demo page 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-' } ``` QA 如何更新数据如果展示内容只是简单的增加或者减少，直接调用`reset`方法即可 ``` js this.$nextTick(() => { this.$refs.scroller.reset() }) ``` 如果展示内容完全重载，那么需要主动设置位置让其能正确回到顶部。适用于改变筛选条件后重载数据的情况 ``` js this.$nextTick(() => { this.$refs.scroller.reset({ top: 0 }) }) ``` QA 如何设置pullup完成方法1，直接调用on-pullup-loading绑定事件的回调，传参数time 表示延时time执行，不传参数表示立即执行 ``` js ... ... methods: { loadMore(done) { ... done(100) } } ``` 方法2，直接调用ref的`donePullup`方法 ``` js this.$refs.demo2.donePullup() ``` 方法3，绑定value, 重置状态

自定义pullup模板同样是用v-model来绑定以获取状态变化

``` html ``` ``` js data () { return { status: { pullupStatus: 'default' } } } ``` ``` // 重置状态为default this.status.pullupStatus = 'default ``` QA 如何设置pulldown完成参照`pullup`, 使用方法`donePulldown`或者绑定`pulldownStatus`然后重置为`default`。 QA 如何禁用或者启用pullup 在有些情况下，比如数据不多不需要上拉加载或者已经加载完成，我们需要禁用pullup 同样可以调用方法 `disablePullup` 或者设置`pullupStatus`为`disabled` 反之，则调用方法 `enablePullup` 或者设置`pullupStatus`为`enabled` 启用keep-alive后滚动有问题需要在调用Scroller的页面上在 hook: `activated`上执行`reset` ``` js activated () { this.$refs.scroller.reset() } ``` --- ### Sticky Edit document Demo page demo 原始链接 Demo source ``` js import { Sticky } from 'cvux' ``` Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | scroll-box | String | window | | scroll tagget | | check-sticky-support | Boolean | true | | if check if sticky is supported on current browser | | offset | Number | 0 | | top distance | Slots |name|description|version| |-------|-------|-------| | default | content | | Demo page --- ### ViewBox Edit document Demo page demo 原始链接 Demo source ``` js import { ViewBox } from 'cvux' ``` Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | body-padding-top | String | | | undefined | | body-padding-bottom | String | | | undefined | Slots |name|description|version| |-------|-------|-------| | header | undefined | | | default | undefined | | | bottom | undefined | | Methods |name|params|description|version| |-------|-------|-------|-------| | scrollTo | `(top)` | undefined | | | getScrollTop | | undefined | | | getScrollBody | | undefined | | Demo page --- ### XHeader Edit document Demo page demo 原始链接 Demo source ``` js import { XHeader } from 'cvux' ``` Props |name|type|default|version|description| |-------|-------|-------|-------|-------| | left-options.showBack | Boolean | true | | if show back text | | left-options.backText | String | Back | | the back text | | left-options.preventGoBack | Boolean | false | | stop go back when clicking | | title | String | | | title | | transition | String | | | title transition | | right-options.showMore | Boolean | false | | if show more icon | Slots |name|description|version| |-------|-------|-------| | default | title | | | left | left slot after backText | | | right | right slot | | Events |name|params|description|version| |-------|-------|-------|-------| | on-click-more | | triggers when more icon is clicked | | | on-click-back | | triggers when left part is clicked and the prop 'left-options.preventGoBack' is true | | | on-click-title | | triggers when title is clicked | | Demo page