Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
08f24b31
U
uni-app
项目概览
DCloud
/
uni-app
14 天 前同步成功
通知
751
Star
38709
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
8
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
8
Issue
8
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
08f24b31
编写于
8月 17, 2019
作者:
d-u-a
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: add <list> <cell> <waterfall>
上级
0a75a4d7
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
159 addition
and
0 deletion
+159
-0
docs/component/cell.md
docs/component/cell.md
+32
-0
docs/component/list.md
docs/component/list.md
+69
-0
docs/component/waterfall.md
docs/component/waterfall.md
+58
-0
未找到文件。
docs/component/cell.md
0 → 100644
浏览文件 @
08f24b31
#### cell
app端nvue专用组件。
`<cell>`
Cell 必须以一级子组件的形式存在于
`list recycler waterfall`
中。
#### 子组件
Cell 支持添加任意类型的组件作为自己的子组件,但是请不要再内部添加滚动容器了。
#### 属性
-
keep-scroll-position boolean. 控制当 Cell 被添加到列表中时,列表的滚动位置是否要保持不变。
-
insert-animation string, cell 的插入动画。当前只支持
`none`
和
`default`
。
-
delete-animation string, cell 的删除动画。当前只支持
`none`
和
`default`
。
-
recycle boolean, 默认值 true。这个属性控制这个 Cell 的 view 和子 views 是否在列表滚动时进行回收,在 iOS 上通常必须指定为 true (因为默认为 true,所以一般不需要写这个属性),如果设置为 false,列表滚动时,页面会占用非常高的内存。Android上默认是true,设置为false可以防止Image和Text上数据重新绑定。
#### 样式
-
通用样式.
> TIP
> - 不要指定 `<cell>` 的 `flex` 值。Cell 的宽度是由它的父容器决定的,你也不需要指定它的高度。
> - Cell 的排版的位置是由父容器控制的,所以一般不要为其指定 `margin` 样式
#### 事件
-
通用事件.
docs/component/list.md
0 → 100644
浏览文件 @
08f24b31
#### list
app端nvue专用组件。
`<list>`
组件是提供垂直列表功能的核心组件,拥有平滑的滚动和高效的内存管理,非常适合用于长列表的展示。最简单的使用方法是在
`<list>`
标签内使用一组由简单数组循环生成的
`<cell>`
标签填充。
```
<template>
<list>
<cell v-for="num in lists">
<text>{{num}}</text>
</cell>
</list>
</template>
<script>
export default {
data () {
return {
lists: ['A', 'B', 'C', 'D', 'E']
}
}
}
</script>
```
> **注意**
> - 不允许相同方向的 `<list>` 或者 `<scroll-view>` 互相嵌套,换句话说就是嵌套的 `<list>` / `<scroll-view>` 必须是不同的方向。
> - `<list>` 需要显式的设置其宽高,可使用 position: absolute; 定位或 width、height 设置其宽高值。
#### 子组件
`<list>`
的子组件只能包括以下四种组件或是 fix 定位的组件,其他形式的组件将不能被正确渲染。
-
`<cell>`
<br>
用于定义列表中的子列表项,类似于 HTML 中的 ul 之于 li。Weex 会对
`<cell>`
进行高效的内存回收以达到更好的性能。
-
`<header>`
<br>
当
`<header>`
到达屏幕顶部时,吸附在屏幕顶部。
-
`<refresh>`
<br>
用于给列表添加下拉刷新的功能。
-
`<loading>`
<br>
`<loading>`
用法与特性和
`<refresh>`
类似,用于给列表添加上拉加载更多的功能。
#### 属性
|属性名|说明|类型|默认值|
|:-|:-|:-|:-|
|show-scrollbar|控制是否出现滚动条|boolean|true|
|loadmoreoffset|触发 loadmore 事件所需要的垂直偏移距离(设备屏幕底部与 list 底部之间的距离),建议手动设置此值,设置大于0的值即可|number|0|
|offset-accuracy|控制 onscroll 事件触发的频率:表示两次onscroll事件之间列表至少滚动了10px。注意,将该值设置为较小的数值会提高滚动事件采样的精度,但同时也会降低页面的性能|number|10|
|pagingEnabled|是否按分页模式线上List,默认值false|boolean|true/false|
|scrollable|是否运行List关系|boolean|true/false|
`loadmoreoffset`
示意图:
#### 事件
-
`loadmore`
事件
如果列表滚动到底部将会立即触发这个事件,你可以在这个事件的处理函数中加载下一页的列表项。 如果未触发,请检查是否设置了loadmoreoffset的值,建议此值设置大于0
-
`scroll`
事件
列表发生滚动时将会触发该事件,事件的默认抽样率为 10px,即列表每滚动 10px 触发一次,可通过属性 offset-accuracy 设置抽样率。
事件中的 event 对象属性:
-
`contentSize {Object}`
:列表的内容尺寸
-
`width {number}`
:列表内容宽度
-
`height {number}`
:列表内容高度
-
`contentOffset {Object}`
:列表的偏移尺寸
-
`x {number}`
:x轴上的偏移量
-
`y {number}`
:y轴上的偏移量
-
`isDragging {boolean}`
: 用户是否正在拖动列表
docs/component/waterfall.md
0 → 100644
浏览文件 @
08f24b31
#### waterfall
app端nvue专用组件。
`<waterfall>`
组件是提供瀑布流布局的核心组件。瀑布流,又称瀑布流式布局是比较流行的一种页面布局,视觉表现为参差不齐的多栏布局。随着页面滚动条向下滚动,这种布局还可以不断加载数据块并附加至当前尾部。
```
<template>
<waterfall column-count="2" column-width="auto">
<cell v-for="num in lists" >
<text>{{num}}</text>
</cell>
</waterfall>
</template>
<script>
export default {
data () {
return {
lists: ['A', 'B', 'C', 'D', 'E']
}
}
}
</script>
<style></style>
```
#### 子组件
和
`<list>`
组件一样,
`<waterfall>`
组件的子组件只能包括以下四种组件或是 fix 定位的组件,其他形式的组件将不能被正确渲染。
-
`<cell>`
:用于定义列表中的子列表项,类似于 HTML 中的 ul 之于 li。Weex 会对
`<cell>`
进行高效的内存回收以达到更好的性能。
-
`<header>`
:当
`<header>`
到达屏幕顶部时,吸附在屏幕顶部。
-
`<refresh>`
:用于给列表添加下拉刷新的功能。
-
`<loading>`
:
`<loading>`
用法与特性和
`<refresh>`
类似,用于给列表添加上拉加载更多的功能。
#### 属性
-
show-scrollbar :
`[可选]`
可选值为 true/ false,默认值为 true。控制是否出现滚动条。
-
column-count:
`[可选]`
描述瀑布流的列数
-
auto: 意味着列数是被其他属性所决定的(比如 column-width)
-
`<integer>`
: 最佳列数,column-width 和 column-count 都指定非0值, 则 column-count 代表最大列数。
-
column-width :
`[可选]`
描述瀑布流每一列的列宽
-
`auto`
: 意味着列宽是被其他属性所决定的(比如 column-count)
-
`<length>`
: 最佳列宽,实际的列宽可能会更宽(需要填充剩余的空间), 或者更窄(如果剩余空间比列宽还要小)。 该值必须大于0
-
column-gap: [可选]列与列的间隙. 如果指定了
`normal`
,则对应 32.
-
left-gap: [可选]左边cell和列表的间隙. 如果未指定 ,则对应
`0`
-
right-gap: [可选]右边cell和列表的间隙. 如果未指定,则对应
`0`
其他支持的属性参见
`<list>`
组件属性部分
#### 事件
支持所有通用事件:
-
click:用于监听点击事件。(例如:一般绑定于子组件之上触发跳转)。
-
longpress:用于监听长按事件(一般绑定于子组件之上例如:长按可删除)。
-
appear:用于监听子组件出现事件(一般绑定于子组件之上例如:监听最后一个元素出现,加载新的数据)
-
disappear:用于监听子组件滑出屏幕事件(一般绑定于子组件之上)
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录