外观
LoadMore 加载更多
约 1039 字大约 3 分钟
2025-10-31
此组件一般用于标识页面底部加载数据时的状态,共有三种状态:
- 加载前,显示"加载更多",加入点击可选,是因为数据不够一页时,无法触发页面的
onReachBottom生命周期 - 加载中,显示"正在加载...",3种动画可选
- 加载后,如果还有数据,回到"加载前"状态,否则加载结束,显示"没有更多了"
基本使用
- 通过
status设置组件的状态,加载前值为loadmore,加载中为loading,没有数据为nomore
注意:以下示例仅为模拟效果,实际中请根据自己的逻辑,修改代码的实现
<template>
<view class="wrap">
<view class="item u-border-bottom" v-for="(item, index) in list" :key="index">
{{'第' + item + '条数据'}}
</view>
<un-loadmore :status="status" />
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const status = ref('loadmore')
const list = ref<number>(15)
const page = ref<number>(0)
// 在真实项目中,这里会在页面的onReachBottom生命周期中处理
const loadMoreData = () => {
if(page.value >= 3) return
status.value = 'loading'
page.value = page.value + 1
setTimeout(() => {
list.value += 10
if(page.value >= 3) status.value = 'nomore'
else status.value = 'loading'
}, 2000)
}
</script>
<style lang="scss" scoped>
.wrap {
padding: 24rpx;
}
.item {
padding: 24rpx 0;
color: $u-content-color;
font-size: 28rpx;
}
</style>控制组件的提示以及动画效果
- 如果不需要图标,可以设置
icon为false - 可以设置
is-dot为true,在没有数据时,内容显示为一个"●"替代默认的"没有更多了" - 可以通过配置
loadingText配置提示的文字,见如下:
<template>
<un-loadmore
:status="status"
:loadingText="loadingText"
:loadmoreText="loadmoreText"
:nomoreText="nomoreText"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const status = ref('loadmore')
const loadingText = ref('努力加载中')
const loadmoreText = ref('轻轻上拉')
const nomoreText = ref('实在没有了')
</script>线条自定义颜色和设置为虚线 2.0.32
- 可以通过配置
dashed和lineColor实现,见如下:
<template>
<un-loadmore
loadmoreText="看,我和别人不一样"
color="#1CD29B"
lineColor="#1CD29B"
dashed
line
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const status = ref('loadmore')
const loadingText = ref('努力加载中')
const loadmoreText = ref('轻轻上拉')
const nomoreText = ref('实在没有了')
</script>手动触发加载更多
有时候可能会因为网络,或者数据不满一页的原因,导致无法上拉触发onReachBottom生命周期,这时候(需status为loadmore状态),用户点击组件,就会触发loadmore 事件,可以在回调中,进行状态的控制和数据的加载,同时也可以修改loadmoreText为"上拉或点击加载更多"进行更加人性化的提示。
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| status | 组件状态 | Enum | loadmore |
| bgColor | 组件背景颜色,在页面是非白色时会用到(默认为transparent) | string | transparent |
| icon | 加载中时是否显示图标 | boolean | true |
| fontSize | 字体大小,单位rpx | string | number | 14 |
| iconSize | 图标大小,单位px | string | number | 17 |
| color | 字体颜色 | string | #606266 |
| loadingIcon | 加载中状态的图标 | Enum | spinner |
| loadmoreText | 加载前的提示语 | string | 加载更多 |
| loadingText | 加载中提示语 | string | 正在加载... |
| nomoreText | 没有更多的提示语 | string | 没有更多了 |
| isDot | status为nomore时,内容显示为一个"●" | boolean | false |
| iconColor | 加载中的动画图标的颜色 | string | #b7b7b7 |
| lineColor | 线条颜色 | string | #E6E8EB |
| dashed | 是否虚线,false-实线,true-虚线 | boolean | false |
| marginTop | 与前一个元素的距离,单位rpx | string | number | 10 |
| marginBottom | 与后一个元素的距离,单位rpx | string | number | 10 |
| height | 高度 | string | number | auto |
| line | 是否显示左边分割线 | boolean | false |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| loadmore | status为loadmore时,点击组件会发出此事件 | - |
Scss 变量
| 变量名 | 默认值 | 说明 |
|---|---|---|
| $un-loadmore-margin | 10px 0 | 加载更多组件外边距 |
| $un-loadmore-content-margin | 0 15px | 加载更多内容外边距 |
| $un-loadmore-icon-wrap-margin-right | 8px | 加载更多图标包装器右边距 |
| $un-loadmore-text-font-size | $text-sm | 加载更多文字大小 |
| $un-loadmore-text-color | $text-color | 加载更多文字颜色 |
| $un-loadmore-dot-text-color | $text-color-muted | 加载更多圆点文字颜色 |
提示
组件内部默认使用 scss 变量,如需修改,请查看 scss 变量使用 文档
