Skip to content

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>

属性

名称类型默认值说明可选值
sizeStringmini组件尺寸large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
typeString""组件类型info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabledBooleanfalse组件是否禁用false, true
stopBooleanfalse是否阻止事件冒泡(Tui统一写法处理事件冒泡)false, true
hoverBooleantrue是否有点击效果false, true
pathString""点击组件后跳转的页面路径,如果为空则响应点击事件,如果不为空则跳转页面不会响应单击事件。-
mainClassString""组件根节点的样式-
nativeClassString""组件根节点原生样式-
effectString"normal"组件显示主题normal(正常), dark(深色), light(浅色), plain(镂空)
lineClassString``
statusNumber1组件状态loadmore: 加载前
loading: 加载中
nomore: 没有更多
loadmoreTextString上拉加载更多加载前的提示文本
sizeString``
lineStyleStringsolidsolid: 实心
dashed: 虚线
dotted': 点状线
double: 双横线
loadingIconStringreload加载中的图标名称
loadingTextString加载中加载中的提示文本
lineBooleanfalse
nomoreTextString页面有限,服务不止没有更多的显示文本

事件

名称返回参数说明
click(e : UniPointerEvent)-