Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
560c92c3
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3216
Star
106
Fork
815
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
94
列表
看板
标记
里程碑
合并请求
70
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
94
Issue
94
列表
看板
标记
里程碑
合并请求
70
合并请求
70
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
560c92c3
编写于
6月 22, 2022
作者:
M
mehaotian
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update(uni-ui): uni-load-more
上级
00663909
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
75 addition
and
75 deletion
+75
-75
docs/component/uniui/uni-load-more.md
docs/component/uniui/uni-load-more.md
+75
-75
未找到文件。
docs/component/uniui/uni-load-more.md
浏览文件 @
560c92c3
::: tip 组件名:uni-load-more
> 代码块: `uLoadMore`
[
点击下载&安装
](
https://ext.dcloud.net.cn/plugin?name=uni-load-more
)
:::
用于列表中,做滚动加载使用,展示 loading 的各种状态。
## 介绍
### 基本用法
```
html
<uni-load-more
status=
"more"
></uni-load-more>
```
## API
### LoadMore Props
|属性名|类型| 可选值|默认值 |说明|
|:-:|:-:|:-:|:-:|:-:|
|iconSize|Number|-|24|指定图标大小|
|status|String |more/loading/noMore|more|loading 的状态|
|showIcon|Boolean|-|true|是否显示 loading 图标|
|showText
**[1.3.3新增]**
|Boolean|-|true|是否显示文本|
|iconType|String|snow/circle/auto|auto|指定图标样式|
|color|String|-|#777777 |图标和文字颜色|
|contentText|Object|-|{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}|各状态文字说明 |
#### Status Options
|参数名称|说明|
|:-:|:-:|
|more|加载前|
|loading|加载中 |
|no-more|没有更多数据 |
#### IconType Options
|参数名称|说明|
|:-:|:-:|
|snow|ios雪花加载样式|
|circle |安卓环形加载样式|
|auto|根据平台自动选择加载样式 |
::: tip 说明
`iconType`
为
`snow`
时,在
`APP-NVUE`
平台不可设置大小,在非
`APP-NVUE`
平台不可设置颜色
:::
### LoadMore Events
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|clickLoadMore |点击加载更多时触发 |e.detail={status:'loading'}|
## 示例
::: warning 注意
示例依赖了
`uni-card`
`uni-section`
`uni-scss`
等多个组件,直接拷贝示例代码将无法正常运行 。
请到
[
组件下载页面
](
https://ext.dcloud.net.cn/plugin?name=uni-load-more
)
,在页面右侧选择
`使用 HBuilderX导入示例项目`
,体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/load-more/load-more
> Template
```
html
::: tip 组件名:uni-load-more
> 代码块: `uLoadMore`
[
点击下载&安装
](
https://ext.dcloud.net.cn/plugin?name=uni-load-more
)
:::
用于列表中,做滚动加载使用,展示 loading 的各种状态。
## 介绍
### 基本用法
```
html
<uni-load-more
status=
"more"
></uni-load-more>
```
## API
### LoadMore Props
|属性名|类型| 可选值|默认值 |说明|
|:-:|:-:|:-:|:-:|:-:|
|iconSize|Number|-|24|指定图标大小|
|status|String |more/loading/noMore|more|loading 的状态|
|showIcon|Boolean|-|true|是否显示 loading 图标|
|showText
|Boolean|-|true|
**[1.3.3新增]**
是否显示文本|
|iconType|String|snow/circle/auto|auto|指定图标样式|
|color|String|-|#777777 |图标和文字颜色|
|contentText|Object|-|{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}|各状态文字说明 |
#### Status Options
|参数名称|说明|
|:-:|:-:|
|more|加载前|
|loading|加载中 |
|no-more|没有更多数据 |
#### IconType Options
|参数名称|说明|
|:-:|:-:|
|snow|ios雪花加载样式|
|circle |安卓环形加载样式|
|auto|根据平台自动选择加载样式 |
::: tip 说明
`iconType`
为
`snow`
时,在
`APP-NVUE`
平台不可设置大小,在非
`APP-NVUE`
平台不可设置颜色
:::
### LoadMore Events
|事件名 |说明 |返回值 |
|:-: |:-: |:-: |
|clickLoadMore |点击加载更多时触发 |e.detail={status:'loading'}|
## 示例
::: warning 注意
示例依赖了
`uni-card`
`uni-section`
`uni-scss`
等多个组件,直接拷贝示例代码将无法正常运行 。
请到
[
组件下载页面
](
https://ext.dcloud.net.cn/plugin?name=uni-load-more
)
,在页面右侧选择
`使用 HBuilderX导入示例项目`
,体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/load-more/load-more
> Template
```
html
<template>
<view
class=
"container"
>
<uni-card
is-full
:is-shadow=
"false"
>
...
...
@@ -100,9 +100,9 @@
</uni-section>
</view>
</template>
```
> Script
</template>
```
> Script
```
html
<script>
export
default
{
...
...
@@ -143,8 +143,8 @@
}
}
</script>
```
> Style
```
> Style
```
html
<style
lang=
"scss"
>
.uni-list-item
{
...
...
@@ -172,9 +172,9 @@
font-size
:
14px
;
color
:
#666
;
}
</style>
```
:::
</style>
```
:::
[
完整示例演示
](
https://hellouniapp.dcloud.net.cn/pages/extUI/load-more/load-more
)
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录