Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Divider } from 'vux'\n
\nSlots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ntitle | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Grid, GridItem } from 'vux'\n
\nGrid
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
rows | \nNumber | \n3 | \nv2.2.0 | \n(deprecated after v2.6.0) the number of rows. Less than 5 will be better | \n
cols | \nNumber | \n3 | \nv2.6.1 | \nthe number of columns. if there is more than one row in grid, need to set cols value, otherwise all grid items will show in one row with the same width | \n
show-lr-borders | \nBoolean | \ntrue | \nv2.8.1 | \nwhether show left and right borders | \n
show-vertical-dividers | \nBoolean | \ntrue | \nv2.8.1 | \nwhether show vertical dividers | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ndefault slot for grid-item list | \n\n |
GridItem
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
icon | \nString | \n\n | \n | icon url. if using local resources, it is better to use slot=icon | \n
label | \nString | \n\n | \n | label text | \n
link | \nString | \n\n | \n | vue-router’s path | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
icon | \nicon slot, use <img> | \n\n |
label | \nslot for label, the same func as prop:label | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Scroller } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nObject | \n\n | \n | current pulldown and pullup status, use v-model for binding | \n
height | \nString | \nviewport height | \n\n | scroller’s height, you can use height=-40 to make scroller set to height: viewportHeight - 40px | \n
lock-x | \nBoolean | \nfalse | \n\n | lock the horizontal direction | \n
lock-y | \nBoolean | \nfalse | \n\n | lock the vertical direction | \n
scrollbar-x | \nBoolean | \nfalse | \n\n | if show horizontal scrollbar | \n
scrollbarY | \nBoolean | \nfalse | \n\n | if show vertical scrollerbar | \n
bounce | \nBoolean | \ntrue | \n\n | if use bounce effect | \n
use-pulldown | \nBoolean | \nfalse | \n\n | if use pulldown plugin | \n
use-pullup | \nBoolean | \nfalse | \n\n | if use pullup plugin | \n
pulldown-config | \nObject | \nsee below | \n\n | config for pulldown plugin | \n
pullup-config | \nObject | \nsee below | \n\n | config for pullup plugin | \n
scroll-bottom-offset | \nNumber | \n0 | \nv2.2.1-rc.6 | \nwhere to emit event:on-scroll-bottom before reaching bottom | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \nscroller content, should has only one div root | \n\n |
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-scroll | \n(position) | \nemits when user scrolls | \n\n |
on-scroll-bottom | \n\n | 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 | \nv2.2.1-rc.6 | \n
on-pulldown-loading | \n\n | emits when scroller is on pulldown-loading status | \n\n |
on-pullup-loading | \n\n | emits when scroller is on pullup-loading status | \n\n |
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
reset | \n(position, duration, easing) | \nreset 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) | \n\n |
donePullup | \n\n | set pullup done after new data is fetched | \n\n |
disablePullup | \n\n | disable pullup plugin when there is no more data | \n\n |
enablePullup | \n\n | enable pullup plugin | \n\n |
donePulldown | \n\n | set pulldown done after new data is fetched | \n\n |
pulldown 默认配置:
\n{\n content: 'Pull Down To Refresh',\n height: 60,\n autoRefresh: false,\n downContent: 'Pull Down To Refresh',\n upContent: 'Release To Refresh',\n loadingContent: 'Loading...',\n clsPrefix: 'xs-plugin-pulldown-'\n}\n
\npullup 默认配置:
\n{\n content: 'Pull Up To Refresh',\n pullUpHeight: 60,\n height: 40,\n autoRefresh: false,\n downContent: 'Release To Refresh',\n upContent: 'Pull Up To Refresh',\n loadingContent: 'Loading...',\n clsPrefix: 'xs-plugin-pullup-'\n}\n
\nQA 如何更新数据
\n如果展示内容只是简单的增加或者减少,直接调用reset
方法即可
this.$nextTick(() => {\n this.$refs.scroller.reset()\n})\n
\n如果展示内容完全重载,那么需要主动设置位置让其能正确回到顶部。适用于改变筛选条件后重载数据的情况
\nthis.$nextTick(() => {\n this.$refs.scroller.reset({\n top: 0\n })\n})\n
\nQA 如何设置pullup完成
\n方法1,直接调用ref的donePullup
方法
this.$refs.demo2.donePullup()\n
\n方法2,绑定value, 重置状态
\n自定义pullup模板同样是用v-model来绑定以获取状态变化
\n<scroller v-model=\"status\"></scroller>\n
\ndata () {\n return {\n status: {\n pullupStatus: 'default'\n }\n }\n}\n
\n// 重置状态为default\nthis.status.pullupStatus = 'default\n
\nQA 如何设置pulldown完成
\n参照pullup
, 使用方法donePulldown
或者绑定pulldownStatus
然后重置为default
。
QA 如何禁用或者启用pullup
\n在有些情况下,比如数据不多不需要上拉加载或者已经加载完成,我们需要禁用pullup
\n同样可以调用方法 disablePullup
或者设置pullupStatus
为disabled
反之,则调用方法 enablePullup
或者设置pullupStatus
为enabled
启用keep-alive后滚动有问题
\n需要在调用Scroller的页面上在 hook: activated
上执行reset
activated () {\n this.$refs.scroller.reset()\n}\n
\nEdit document
\n Demo page
\n demo 原始链接
\n Demo source
import { Sticky } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
scroll-box | \nString | \nwindow | \n\n | scroll tagget | \n
check-sticky-support | \nBoolean | \ntrue | \n\n | if check if sticky is supported on current browser | \n
offset | \nNumber | \n0 | \n\n | top distance | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ncontent | \n\n |
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
bindSticky | \n\n | manually re-bind sticky | \nv2.5.4 | \n
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { ViewBox } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
body-padding-top | \nString | \n\n | \n | undefined | \n
body-padding-bottom | \nString | \n\n | \n | undefined | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
header | \nundefined | \n\n |
default | \nundefined | \n\n |
bottom | \nundefined | \n\n |
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
scrollTo | \n(top) | \nundefined | \n\n |
getScrollTop | \n\n | undefined | \n\n |
getScrollBody | \n\n | undefined | \n\n |
Edit document
\n Demo page
\n demo 原始链接
\n Demo source
import { XHeader } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
left-options.showBack | \nBoolean | \ntrue | \n\n | if show back text | \n
left-options.backText | \nString | \nBack | \n\n | the back text | \n
left-options.preventGoBack | \nBoolean | \nfalse | \n\n | stop go back when clicking | \n
title | \nString | \n\n | \n | title | \n
transition | \nString | \n\n | \n | title transition | \n
right-options.showMore | \nBoolean | \nfalse | \n\n | if show more icon | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \ntitle | \n\n |
left | \nleft slot after backText | \n\n |
overwrite-left | \noverwrite left icon and text | \nv2.2.2 | \n
right | \nright slot | \n\n |
overwrite-title | \noverwrite title content | \nv2.5.3 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-click-more | \n\n | triggers when more icon is clicked | \n\n |
on-click-back | \n\n | triggers when left part is clicked and the prop ‘left-options.preventGoBack’ is true | \n\n |
on-click-title | \n\n | triggers when title is clicked | \n\n |