Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DiDi
cube-ui
提交
641dcc83
C
cube-ui
项目概览
DiDi
/
cube-ui
大约 1 年 前同步成功
通知
34
Star
9078
Fork
1508
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
C
cube-ui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
641dcc83
编写于
11月 29, 2017
作者:
A
AmyFoxFN
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update scroll doc
上级
92eb4e0b
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
37 addition
and
46 deletion
+37
-46
document/components/docs/zh-CN/scroll.md
document/components/docs/zh-CN/scroll.md
+37
-46
未找到文件。
document/components/docs/zh-CN/scroll.md
浏览文件 @
641dcc83
...
...
@@ -14,56 +14,55 @@
</div>
```
-
滚动条
-
配置 better-scroll 选项
通过 options 属性可以配置 better-scroll 的选项,包括滚动条、下拉刷新、上拉加载等,具体可查看 better-scroll 的
[
官方文档
](
https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/
)
,这里仅对几个常用的配置项进行介绍说明。
1)滚动条
默认无滚动条,还可设为淡入淡出滚动条或一直显示滚动条。
```
html
<!-- 淡入淡出滚动条 -->
<cube-scroll
:data=
"items"
:scrollbar=
"true"
></cube-scroll>
<!-- 一直显示滚动条 -->
<cube-scroll
:data=
"items"
:scrollbar=
"scrollbar"
></cube-scroll>
<cube-scroll
:data=
"items"
:options=
"options"
></cube-scroll>
```
```
javascript
export
default
{
data
()
{
return
{
items
:
[
1
,
2
,
3
,
4
,
5
],
scrollbar
:
{
fade
:
false
options
:
{
scrollbar
:
{
fade
:
false
}
}
}
}
}
```
-
下拉刷新
2)
下拉刷新
默认无下拉刷新功能,可通过配置
`pull-down-refresh`
属性
开启
`pulling-down`
事件派发和下拉动画,你可以监听
`pulling-down`
事件更新数据。
默认无下拉刷新功能,可通过配置
项
`pullDownRefresh`
开启
`pulling-down`
事件派发和下拉动画,你可以监听
`pulling-down`
事件更新数据。
```
html
<!-- 开启下拉刷新功能,并使用默认参数 -->
<cube-scroll
ref=
"scroll"
:data=
"items"
:pull-down-refresh=
"true"
@
pulling-down=
"onPullingDown"
></cube-scroll>
<!-- 开启下拉刷新功能,并使用自定义参数 -->
<cube-scroll
ref=
"scroll"
:data=
"items"
:pull-down-refresh=
"pullDownRefresh"
@
pulling-down=
"onPullingDown"
></cube-scroll>
:options=
"options"
@
pulling-down=
"onPullingDown"
>
</cube-scroll>
```
```
javascript
export
default
{
data
()
{
return
{
items
:
[
1
,
2
,
3
,
4
,
5
],
pullDownRefresh
:
{
threshold
:
90
,
stop
:
40
,
txt
:
'
Refresh success
'
options
:
{
pullDownRefresh
:
{
threshold
:
90
,
stop
:
40
,
txt
:
'
Refresh success
'
}
}
}
},
...
...
@@ -84,22 +83,15 @@
}
```
-
上拉加载
3)
上拉加载
默认无上拉加载功能,可通过配置
`pull-up-load`
属性
开启
`pulling-up`
事件派发和上拉动画,你可以监听
`pulling-up`
事件更新数据。
默认无上拉加载功能,可通过配置
项
`pullUpLoad`
开启
`pulling-up`
事件派发和上拉动画,你可以监听
`pulling-up`
事件更新数据。
```
html
<!-- 开启上拉加载功能,并使用默认参数 -->
<cube-scroll
ref=
"scroll"
:data=
"items"
:pull-up-load=
"true"
@
pulling-up=
"onPullingUp"
></cube-scroll>
<!-- 开启上拉加载功能,并使用自定义参数 -->
<cube-scroll
ref=
"scroll"
:data=
"items"
:
pull-up-load=
"pullUpLoad
"
:
options=
"options
"
@
pulling-up=
"onPullingUp"
></cube-scroll>
```
```
javascript
...
...
@@ -108,11 +100,13 @@
return
{
items
:
[
1
,
2
,
3
,
4
,
5
],
itemIndex
:
5
,
pullUpLoad
:
{
threshold
:
0
,
txt
:
{
more
:
'
Load more
'
,
noMore
:
'
No more data
'
options
:
{
pullUpLoad
:
{
threshold
:
0
,
txt
:
{
more
:
'
Load more
'
,
noMore
:
'
No more data
'
}
}
}
}
...
...
@@ -149,8 +143,7 @@
<cube-scroll
ref=
"scroll"
:data=
"items"
:pull-down-refresh=
"pullDownRefresh"
:pull-up-load=
"pullUpLoad"
:options=
"options"
@
pulling-down=
"onPullingDown"
@
pulling-up=
"onPullingUp"
>
<template
slot=
"pulldown"
slot-scope=
"props"
>
...
...
@@ -182,21 +175,19 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| - | - | - | - | - |
| data | 用于列表渲染的数据 | Array | - | [] |
| options | better-scroll 配置项 | Object | - | {
<br>
click: true,
<br>
probeType: 1,
<br>
scrollbar: false,
<br>
pullDownRefresh: false,
<br>
pullUpLoad: false
<br>
} |
| direction | 滚动方向 | String | 'vertical', 'horizontal' | 'vertical' |
| scrollbar | 滚动条配置项 | Boolean/Object | - | false |
| pullDownRefresh | 下拉刷新配置项 | Boolean/Object | - | false |
| pullUpLoad | 上拉加载配置项 | Boolean/Object | - | false |
| listenScroll | 是否派发 scroll 事件 | Boolean | true/false | false |
| probeType | scroll 事件的派发时机
<br>
1为非实时派发;
<br>
2为滚动操作过程实时派发;
<br>
3为包括惯性滚动的整个滚动过程实时派发 | Number | 1, 2, 3 | 0 |
| listenBeforeScroll | 是否派发 before-scroll-start 事件 | Boolean | true/false | false |
| refreshDelay | data属性的数据更新后,scroll 的刷新延时 | Number | - | 20 |
-
`scrollbar`
子配置项
-
options 的常用子配置项:
`scrollbar`
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| - | - | - | - | - |
| fade | 是否淡入淡出 | Boolean | true/false | false |
-
`pullDownRefresh`
子配置项
-
options 的常用子配置项:
`pullDownRefresh`
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| - | - | - | - | - |
...
...
@@ -204,7 +195,7 @@
| stop | 回弹停留的位置 | Number | - | 40 |
| txt | 刷新成功的文案 | String | - | 'Refresh success' |
-
`pullUpLoad`
子配置项
-
options 的常用子配置项:
`pullUpLoad`
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| - | - | - | - | - |
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录