编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Divider } from 'vux'\n
\n\n不支持配置分割线颜色,因为线条是通过图片来实现的。好处是在任何背景颜色下都可以适应。如果需要配置颜色,请使用`load-more`组件。\n
\n<divider>我是有底线的</divider>\n
\nSlots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n分隔线标题 | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Grid, GridItem } from 'vux'\n
\n<grid>\n <grid-item label=\"Grid\" v-for=\"i in 9\">\n <img slot=\"icon\" src=\"../assets/grid_icon.png\">\n </grid-item>\n</grid>\n
\nGrid
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
rows | \nNumber | \n3 | \nv2.2.0 | \n(v2.6.0 之后废弃,使用 col 替代)宫格行数,建议少于5 | \n
cols | \nNumber | \n3 | \nv2.6.1 | \n列数。如果为非单行 Grid,需要设置 cols,否则所有 GridItem 会平均宽度显示在一行。 | \n
show-lr-borders | \nBoolean | \ntrue | \nv2.8.1 | \n是否显示左右边框 | \n
show-vertical-dividers | \nBoolean | \ntrue | \nv2.8.1 | \n是否显示垂直分割线 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n用于grid-item 的插槽 | \n\n |
GridItem
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
icon | \nString | \n\n | \n | 图标地址,如果是线上地址,推荐使用该prop。如果是本地图标资源,使用slot=icon 可以保证资源被正确打包 | \n
label | \nString | \n\n | \n | label 文字 | \n
link | \nString | \n\n | \n | vue-router 路径 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
icon | \n图标内容,直接使用<img> 标签 | \n\n |
label | \nlabel 文字的 slot,作用同 prop:label | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Scroller } from 'vux'\n
\n\n该组件已经不再维护,也不建议使用,大部分情况下也不需要用到该组件。\n
\n建议使用第三方相关组件,相关 issue 将不会处理。\n
\n`Scroller`的内容必须是一个`div`,并且只能有一个`div`\n
\n`Scroller` 希望解决的是简单的列表问题而不是一个内嵌各种复杂标签交互的容器,很容易发生性能或者交互问题。\n
\n
\n默认高度为整个视口高度,如果你加了`x-header`,那么你需要减去一个`x-header`的高度: `height=\"-46\"`\n
\n
\n请确保在你的数据更新后进行`reset`操作(参考下面文档),如果你做了`reset`还有问题再开`issue`并附上代码,否则将`绝对不会被处理`。\n
Props
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
value | \nObject | \n\n | \n | 对象,上拉或者下拉的状态双向绑定,使用 v-model 绑定,pulldownStatus 及 pullupStatus | \n
height | \nString | \nviewport height | \n\n | 容器高度,默认为整个viewport高度,注意,该属性接受的是 String 类型,比如 200px,如果你希望scroller自动计算除去头部尾部的高度,请这样设置让组件自动计算,如height="-40" | \n
lock-x | \nBoolean | \nfalse | \n\n | 锁定X方向 | \n
lock-y | \nBoolean | \nfalse | \n\n | 锁定Y方向 | \n
scrollbar-x | \nBoolean | \nfalse | \n\n | 是否显示横向滚动条 | \n
scrollbarY | \nBoolean | \nfalse | \n\n | 是否显示垂直方向滚动条 | \n
bounce | \nBoolean | \ntrue | \n\n | 是否显示边缘回弹效果 | \n
use-pulldown | \nBoolean | \nfalse | \n\n | 是否使用下拉组件 | \n
use-pullup | \nBoolean | \nfalse | \n\n | 是否使用上拉组件 | \n
pulldown-config | \nObject | \nsee below | \n\n | 下拉组件配置 | \n
pullup-config | \nObject | \nsee below | \n\n | 上拉组件配置 | \n
scroll-bottom-offset | \nNumber | \n0 | \nv2.2.1-rc.6 | \n在距离底部多长距离时触发事件 on-scroll-bottom | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \nscroller 内容,必须是一个 div 元素 | \n\n |
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-scroll | \n(position) | \n容器滚动时触发,参数为top 和left 位置 | \n\n |
on-scroll-bottom | \n\n | 滚动到底部时触发,注意事件会触发多次,如果你需要进行数据获取,记得设置一个状态值 | \nv2.2.1-rc.6 | \n
on-pulldown-loading | \n\n | 用户触发下拉刷新状态,监听该事件以获取加载新数据 | \n\n |
on-pullup-loading | \n\n | 用户触发上拉加载状态,监听该事件以加载新数据 | \n\n |
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
reset | \n(position, duration, easing) | \n在内容变化(v-for渲染,异步数据加载)后需要调用,用以重新渲染,避免新加的内容无法上拉看到,一般在 $nextTick 回调里调用。easing 可以为 ease-in, ease-in-out, ease, bezier(n, n, n, n) | \n\n |
donePullup | \n\n | 设置上拉刷新操作完成,在数据加载后执行 | \n\n |
disablePullup | \n\n | 禁用上拉刷新,在没有更多数据时执行 | \n\n |
enablePullup | \n\n | 启用上拉刷新插件 | \n\n |
donePulldown | \n\n | 设置下拉刷新操作完成,在数据加载后执行 | \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
\n编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { Sticky } from 'vux'\n
\n在Chrome模拟器运行时你可能会发现没有效果,这是因为Chrome并不支持原生sticky实现而模拟器环境是iPhone,目前程序是根据Safari版本来判断是否原生支持sticky。因此你可以切换到Android系统进行测试,但是真机上是完全正常的交互。\n
\n
\n你也可以设置禁用原生支持检测以获得相同的效果:`:check-sticky-support=\"false\"`\n
如果你没有使用100%
的布局,也没有头部可以直接这样使用
<sticky>\n <div>Blabla</div>\n</sticky>\n
\n如果你像demo一样使用view-box
和x-header
,那么需要这样:
<sticky scroll-box=\"vux_view_box_body\" :offset=\"46\">\n <div>Blabla</div>\n</sticky>\n
\n建议加一个div
高度为内容高度,这样可以避免当定位为sticky
时下面的元素会突然向上走。
// 禁用原生检测时,可以在外围加\n<div style=\"height:44px;\">\n <sticky scroll-box=\"vux_view_box_body\" :offset=\"46\" :check-sticky-support=\"false\">\n <div>Blabla</div>\n </sticky>\n</div>\n\n// 使用原生检测时,`div`紧挨着组件之后,并设置类名`vux-sticky-fill`\n<sticky scroll-box=\"vux_view_box_body\" :offset=\"46\">\n <div>Blabla</div>\n</sticky>\n<div class=\"vux-sticky-fill\" style=\"height:44px;\"><div>\n
\n\n请不要直接照抄 demo 代码,滚动容器为 window 时请不要指定 scroll-box,滚动容器并非使用 `view-box` 时 id 并不是 `vux_view_box_body`,请按照实际情况来设定。\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
scroll-box | \nString | \nwindow | \n\n | 滚动容器,默认为window ,如果你使用了viewbox,那么你需要指定容器id:vux_view_box_body | \n
check-sticky-support | \nBoolean | \ntrue | \n\n | 是否检测当前浏览器是否支持sticky特性,禁用则在iPhone 设置上也使用scroll 实现 | \n
offset | \nNumber | \n0 | \n\n | 距离顶部高度,在存在头部(如使用了x-header )的情况下需要设置一个距离 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n内容插槽 | \n\n |
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
bindSticky | \n\n | 手动重新绑定,用于内容变化导致位置变化定位不再正确的情况 | \nv2.5.4 | \n
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { ViewBox } from 'vux'\n
\n该组件为100%高
布局,可以解决部分键盘输入的问题,但是同时会在safari中出现向下滚动时无法自动隐藏url工具栏和底部栏的问题。
在viewBox
里元素定位为absolute
,效果等同于fixed
。
使用时需要设置 html, body 高为100%:
\nhtml, body {\n height: 100%;\n width: 100%;\n overflow-x: hidden;\n}\n
\nview-box所有父div
也需要为100%高度:
<div style=\"height:100%;\">\n <view-box ref=\"viewBox\">\n <x-header slot=\"header\" style=\"width:100%;position:absolute;left:0;top:0;z-index:100;\"></x-header>\n <router-view></router-view>\n <tabbar slot=\"bottom\"></tabbar>\n </view-box>\n</div>\n
\n如果你想保存滚动距离,推荐使用vuex
实现,在特定path
对scrollBody
监听scroll
事件,并获取滚动距离保存到vuex
的state
里。示例可以参考vux源码的App.vue
Props
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
body-padding-top | \nString | \n\n | \n | 主体的padding-top 值,当顶部存在x-header 等absolute 定位元素时需要设置 | \n
body-padding-bottom | \nString | \n\n | \n | 主体的padding-bottom 值,当底部存在tabbar 等absolute 定位元素时需要设置 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
header | \n顶部区域,如果要使用统一的XHeader,可以使用该slot | \n\n |
default | \n主体内容,可滚动的区域 | \n\n |
bottom | \n底部区域,Tabbar可以使用该slot | \n\n |
Methods
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
scrollTo | \n(top) | \n滚动到指定位置 | \n\n |
getScrollTop | \n\n | 获取当前滚动距离 | \n\n |
getScrollBody | \n\n | 获取滚动div , 也可以直接用组件引用的.$refs.viewBoxBody | \n\n |
编辑文档
\n 进入demo页面
\n demo 原始链接
\n demo源码
import { XHeader } from 'vux'\n
\nProps
\nname | \ntype | \ndefault | \nversion | \ndescription | \n
---|---|---|---|---|
left-options.showBack | \nBoolean | \ntrue | \n\n | 是否显示返回文字 | \n
left-options.backText | \nString | \nBack | \n\n | 返回文字 | \n
left-options.preventGoBack | \nBoolean | \nfalse | \n\n | 是否阻止返回 | \n
title | \nString | \n\n | \n | 标题 | \n
transition | \nString | \n\n | \n | 标题出现的动画 | \n
right-options.showMore | \nBoolean | \nfalse | \n\n | 是否显示右侧的更多图标 | \n
Slots
\nname | \ndescription | \nversion | \n
---|---|---|
default | \n标题 | \n\n |
left | \n左侧部分插槽,在返回文字后,不会影响到原有的图标 | \n\n |
overwrite-left | \n重写左侧部分的返回文字及图标 | \nv2.2.2 | \n
right | \n右侧部分插槽 | \n\n |
overwrite-title | \n标题插槽,用于自定义标题位置内容 | \nv2.5.3 | \n
Events
\nname | \nparams | \ndescription | \nversion | \n
---|---|---|---|
on-click-more | \n\n | 点击右侧更多时触发 | \n\n |
on-click-back | \n\n | 当left-options.preventGoBack为true,点击左边返回时触发 | \n\n |
on-click-title | \n\n | 点击标题时触发 | \n\n |