t-loadmore
Loadmore 加载更多
组件介绍
加载更多组件，指示用户可以加载内容的状态，支持多种状态和装饰元素，并可配置尺寸和样式。
平台兼容
| Harmony | H5 | Android | iOS | 小程序 | UTS |
|---|---|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
基础用法
vue
<template>
<view class="loadmore-demo">
<t-loadmore :status="0" :line="true"></t-loadmore>
<t-loadmore :status="1" :line="true"></t-loadmore>
<t-loadmore :status="2" :line="true"></t-loadmore>
</view>
</template>
<style scoped>
.loadmore-demo {
padding: 40rpx;
}
</style>Props
| 属性名 | 类型 | 默认值 | 说明 | 可选值 |
|---|---|---|---|---|
| size | String | "medium" | 组件尺寸 | large, medium, small, mini |
| type | String | "primary" | 组件类型 | info, primary, error, warning, success |
| disabled | Boolean | false | 组件是否禁用 | true, false |
| hover | Boolean | false | 是否有点击效果 | true, false |
| path | String | "" | 点击组件后跳转的页面路径 | - |
| effect | String | "normal" | 组件显示主题 | normal, dark, light, plain |
| line | Boolean | false | 是否显示分隔线 | true, false |
| lineClass | String | "" | 分隔线样式 | - |
| lineStyle | String | "solid" | 分隔线类型 | solid, dashed, dotted, double |
| status | Number | 1 | 组件状态 | 0: 加载前, 1: 加载中, 2: 没有更多 |
| loadingClass | String | "" | 加载中的图标样式 | - |
| loadmoreText | String | "上拉加载更多" | 加载前的提示文本 | - |
| loadingText | String | "加载中" | 加载中的提示文本 | - |
| nomoreText | String | "页面有限，服务不止" | 没有更多的显示文本 | - |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击时触发 | - |
| transitionend | 动画结束时触发 | - |
| initFinished | 组件初始化完成触发 | 组件的节点信息 |
| touchstart | 触摸开始时触发 | 触摸事件对象 |
| touchend | 触摸结束时触发 | 触摸事件对象 |
| touchmove | 触摸移动时触发 | 触摸事件对象 |
| touchcancel | 触摸取消时触发 | 触摸事件对象 |
Status 说明
| 状态值 | 说明 | 显示文本 |
|---|---|---|
| 0 | 加载前 | loadmoreText |
| 1 | 加载中 | loadingText |
| 2 | 没有更多 | nomoreText |