提交 560c92c3 编写于 作者: M mehaotian

update(uni-ui): uni-load-more

上级 00663909
::: 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.
先完成此消息的编辑!
想要评论请 注册