Loadmore (加载更多)
指示用户可以加载内容的状态,支持多种状态和装饰元素,并可配置尺寸和样式。
支持平台
安卓 | ios | 鸿蒙 | web | 微信小程序 |
---|---|---|---|---|
√ | √ | √ | √ | √ |
示例代码
html
<template>
<t-page title="加载更多">
<t-card main-class="mlrt-30" title="Loadmore 加载更多" sub-title="指示用户可以加载内容的状态,支持多种状态和装饰元素,并可配置尺寸和样式。"></t-card>
<introduction title="基础功能+主题展示">
<t-col main-class="tdr tdb tdp mb-30 fc">
<t-loadmore></t-loadmore>
</t-col>
<t-col main-class="tdr tdb tdp mb-30 fc">
<t-loadmore type="success"></t-loadmore>
</t-col>
<t-col main-class="tdr tdb tdp mb-30 fc">
<t-loadmore type="error"></t-loadmore>
</t-col>
<t-col main-class="tdr tdb tdp mb-30 fc">
<t-loadmore type="primary"></t-loadmore>
</t-col>
<t-col main-class="tdr tdb tdp mb-30 fc">
<t-loadmore type="warning"></t-loadmore>
</t-col>
</introduction>
<introduction title="线条类型">
<t-col main-class="tdr tdb tdp mb-30 fc">
<t-loadmore type="success" lineStyle='dashed' :line="true"></t-loadmore>
</t-col>
<t-col main-class="tdr tdb tdp mb-30 fc">
<t-loadmore type="primary" :line="true"></t-loadmore>
</t-col>
</introduction>
<introduction title="状态"><t-col main-class="tdr tdb tdp mb-30 fc">
<t-loadmore :line="true" :status="2"></t-loadmore></t-col>
<t-col main-class="tdr tdb tdp mb-30 fc"><t-loadmore type="success" :line="true"
:status="3"></t-loadmore></t-col>
<t-col main-class="tdr tdb tdp mb-30 fc"><t-loadmore type="primary" :line="true"
:status="1"></t-loadmore></t-col>
</introduction>
<introduction title="状态(无分割线)">
<t-col main-class="tdr tdb tdp mb-30 fc"><t-loadmore :status="2"></t-loadmore></t-col>
<t-col main-class="tdr tdb tdp mb-30 fc"><t-loadmore type="success" :status="3"></t-loadmore></t-col>
<t-col main-class="tdr tdb tdp mb-30 fc"><t-loadmore type="error" :status="2"></t-loadmore></t-col>
<t-col main-class="tdr tdb tdp mb-30 fc"><t-loadmore type="primary" :status="1"></t-loadmore></t-col>
</introduction>
</t-page>
</template>
属性
名称 | 类型 | 默认值 | 说明 | 可选值 |
---|---|---|---|---|
size | String | mini | 组件尺寸 | large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你) |
type | String | "" | 组件类型 | info(信息), primary(正常), error(错误), warning(警告), success(成功) |
disabled | Boolean | false | 组件是否禁用 | false, true |
stop | Boolean | false | 是否阻止事件冒泡(Tui统一写法处理事件冒泡) | false, true |
hover | Boolean | true | 是否有点击效果 | false, true |
path | String | "" | 点击组件后跳转的页面路径,如果为空则响应点击事件,如果不为空则跳转页面不会响应单击事件。 | - |
mainClass | String | "" | 组件根节点的样式 | - |
nativeClass | String | "" | 组件根节点原生样式 | - |
effect | String | "normal" | 组件显示主题 | normal(正常), dark(深色), light(浅色), plain(镂空) |
lineClass | String | `` | ||
status | Number | 1 | 组件状态 | loadmore : 加载前loading : 加载中nomore : 没有更多 |
loadmoreText | String | 上拉加载更多 | 加载前的提示文本 | |
size | String | `` | ||
lineStyle | String | solid | solid : 实心dashed : 虚线dotted' : 点状线double : 双横线 | |
loadingIcon | String | reload | 加载中的图标名称 | |
loadingText | String | 加载中 | 加载中的提示文本 | |
line | Boolean | false | ||
nomoreText | String | 页面有限,服务不止 | 没有更多的显示文本 |
事件
名称 | 返回参数 | 说明 |
---|---|---|
click | (e : UniPointerEvent) | - |