Tuniao UI Uniapp V3TnLoadmore-加载更多
此组件可用于提示用户接下来还有数据的场景，一般放在列表的底部
组件位置
typescript
import TnLoadmore from '@tuniao/tnui-vue3-uniapp/components/loadmore/src/loadmore.vue'import TnLoadmore from '@tuniao/tnui-vue3-uniapp/components/loadmore/src/loadmore.vue'typescript
import TnLoadmore from '@/uni_modules/tuniaoui-vue3/components/loadmore/src/loadmore.vue'import TnLoadmore from '@/uni_modules/tuniaoui-vue3/components/loadmore/src/loadmore.vue'平台差异说明
| App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... |
|---|---|---|---|---|
| √ | √ | √ | √ | 适配中 |
基础使用
通过status设置加载更多的状态，可以值为loadmore、loading、nomore、empty
可以通过color属性来设置文字、加载图标、点内容的颜色，可以传递hex、rgb、rgba和图鸟内置颜色的值文本颜色
vue
<script lang="ts" setup>
import { ref } from 'vue'
import type { LoadmoreStatus } from '@tuniao/tnui-vue3-uniapp'
const loadmoreStatus = ref<LoadmoreStatus>('loadmore')
</script>
<template>
<TnLoadmore :status="loadmoreStatus" />
</template><script lang="ts" setup>
import { ref } from 'vue'
import type { LoadmoreStatus } from '@tuniao/tnui-vue3-uniapp'
const loadmoreStatus = ref<LoadmoreStatus>('loadmore')
</script>
<template>
<TnLoadmore :status="loadmoreStatus" />
</template>vue
<script lang="ts" setup>
import { ref } from 'vue'
import type { LoadmoreStatus } from '@/uni_modules/tuniaoui-vue3'
const loadmoreStatus = ref<LoadmoreStatus>('loadmore')
</script>
<template>
<tn-loadmore :status="loadmoreStatus" />
</template><script lang="ts" setup>
import { ref } from 'vue'
import type { LoadmoreStatus } from '@/uni_modules/tuniaoui-vue3'
const loadmoreStatus = ref<LoadmoreStatus>('loadmore')
</script>
<template>
<tn-loadmore :status="loadmoreStatus" />
</template>模式详解
不同的模式可以配置不同的参数设置达到开发者需要的效果
加载更多-loadmore
将status设置为loadmore显示text.loadmore中的提示内容
vue
<template>
<TnLoadmore status="loadmore" />
</template><template>
<TnLoadmore status="loadmore" />
</template>加载中-loading
将status设置为loading显示text.loading中的提示内容
同时将loading-icon设置为true在此状态下可以显示出加载的图标，通过loading-icon-mode配置加载图标的样式，有效值可以查看加载图标
vue
<template>
<TnLoadmore status="loading" />
</template><template>
<TnLoadmore status="loading" />
</template>修改 loading-icon 为小花朵
vue
<template>
<TnLoadmore status="loading" loading-icon-mode="flower" />
</template><template>
<TnLoadmore status="loading" loading-icon-mode="flower" />
</template>加载完毕-nomore
将status设置为nomore显示text.nomore中的提示内容
vue
<template>
<TnLoadmore status="nomore" />
</template><template>
<TnLoadmore status="nomore" />
</template>数据为空-empty
将status设置为empty显示text.empty中的提示内容
vue
<template>
<TnLoadmore status="empty" />
</template><template>
<TnLoadmore status="empty" />
</template>自定义加载提示文字
通过给text属性传递一个对象可以自定义提示文字，对象loadmore属性用于设置加载更多的提示文字，对象loading属性用于设置加载中的提示文字，对象nomore属性用于设置加载完毕的提示文字，对象empty属性用于设置数据为空的提示文字
vue
<script lang="ts" setup>
import type { LoadmoreText } from '@tuniao/tnui-vue3-uniapp'
const customLoadMoreText: LoadmoreText = {
loadmore: '还有内容呢',
loading: '等等，数据正在赶来',
nomore: '哎呀，没有啦',
empty: '空空的呀',
}
</script>
<template>
<TnLoadmore status="loadmore" :text="customLoadMoreText" />
</template><script lang="ts" setup>
import type { LoadmoreText } from '@tuniao/tnui-vue3-uniapp'
const customLoadMoreText: LoadmoreText = {
loadmore: '还有内容呢',
loading: '等等，数据正在赶来',
nomore: '哎呀，没有啦',
empty: '空空的呀',
}
</script>
<template>
<TnLoadmore status="loadmore" :text="customLoadMoreText" />
</template>vue
<script lang="ts" setup>
import type { LoadmoreText } from '@/uni_modules/tuniaoui-vue3'
const customLoadMoreText: LoadmoreText = {
loadmore: '还有内容呢',
loading: '等等，数据正在赶来',
nomore: '哎呀，没有啦',
empty: '空空的呀',
}
</script>
<template>
<tn-loadmore status="loadmore" :text="customLoadMoreText" />
</template><script lang="ts" setup>
import type { LoadmoreText } from '@/uni_modules/tuniaoui-vue3'
const customLoadMoreText: LoadmoreText = {
loadmore: '还有内容呢',
loading: '等等，数据正在赶来',
nomore: '哎呀，没有啦',
empty: '空空的呀',
}
</script>
<template>
<tn-loadmore status="loadmore" :text="customLoadMoreText" />
</template>隐藏内容显示点代替
将loading-text设置为false之后，在status设置为loadmore、nomore、empty状态下会隐藏提示文本信息使用点代替内容
如果是在status设置为loading状态下，将loading-icon设置为false之后会显示点代替内容
vue
<template>
<TnLoadmore status="loadmore" :loading-text="false" />
</template><template>
<TnLoadmore status="loadmore" :loading-text="false" />
</template>vue
<template>
<TnLoadmore status="loading" :loading-icon="false" :loading-text="false" />
</template><template>
<TnLoadmore status="loading" :loading-icon="false" :loading-text="false" />
</template>API
Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| status | 加载状态，具体说明可以查看上面详解 | String | loadmore | loading \ nomore \ empty |
| size | 加载内容尺寸大小，默认单位为 rpx，可以传入带单位的尺寸值 | String | - | sm / lg / xl |
| color | 加载内容颜色，支持图鸟内置的颜色值、hex、rgb、rgba | String | - | - |
| text | 加载文案配置 | LoadmoreText | {loadmore: '加载更多',loading: '加载中...',nomore: '没有更多了',empty: '暂无数据'} | - |
| loading-icon | 是否显示加载图标，在loading模式下有效 | Boolean | true | false |
| loading-icon-mode | 加载图标类型加载图标 | String | circle | circle \ flower \ semicircle |
| loading-text | 是否显示加载文案 | Boolean | true | false |
Emits
| 事件名 | 说明 | 类型 |
|---|---|---|
| click | 点击事件 | () => void |
LoadmoreText
| 属性名 | 说明 | 类型 | 默认值 | 可选值 | 必填 |
|---|---|---|---|---|---|
| loadmore | 加载更多提示文字 | String | - | - | 否 |
| loading | 加载中提示文字 | String | - | - | 否 |
| nomore | 加载完成提示文字 | String | - | - | 否 |
| empty | 数据为空提示文字 | String | - | - | 否 |