Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
程序yang
unidocs-zh
提交
560c92c3
U
unidocs-zh
项目概览
程序yang
/
unidocs-zh
与 Fork 源项目一致
Fork自
DCloud / unidocs-zh
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录