# t-loadmore

Loadmore 加载更多

t-loadmore 组件介绍

加载更多组件，指示用户可以加载内容的状态，支持多种状态和装饰元素，并可配置尺寸和样式。

t-loadmore 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-loadmore 基础用法

基础用法参考 demo/loadmore/loadmore.uvue，支持状态、分割线、尺寸与主题配置。

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mlrt-15"
				title="Loadmore 加载更多"
				sub-title="指示用户可以加载内容的状态，支持多种状态和装饰元素，并可配置尺寸和样式。"></t-card>
		<introduction title="基础功能+主题展示">
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore></t-loadmore>
			</view>
		</introduction>
		<introduction title="线条类型">
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore type="success"
							lineStyle='dashed'
							:line="true"></t-loadmore>
			</view>
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore type="primary"
							:line="true"></t-loadmore>
			</view>
		</introduction>
		<introduction title="状态">
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore :line="true"
							:status="2"></t-loadmore>
			</view>
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore type="success"
							:line="true"
							:status="3"></t-loadmore>
			</view>
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore type="primary"
							:line="true"
							:status="1"></t-loadmore>
			</view>
		</introduction>
		<introduction title="状态(无分割线)">
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore size="medium"
							:status="2"></t-loadmore>
			</view>
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore size="medium"
							type="success"
							:status="3"></t-loadmore>
			</view>
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore size="medium"
							type="error"
							:status="2"></t-loadmore>
			</view>
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore size="medium"
							type="primary"
							:status="1"></t-loadmore>
			</view>
		</introduction>

		<!-- 补充的演示示例 -->
		<introduction title="尺寸演示">
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore size="large"
							:status="2"></t-loadmore>
			</view>
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore size="medium"
							:status="2"></t-loadmore>
			</view>
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore size="small"
							:status="2"></t-loadmore>
			</view>
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore size="mini"
							:status="2"></t-loadmore>
			</view>
		</introduction>

		<introduction title="禁用状态">
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore :disabled="true"
							:status="2"></t-loadmore>
			</view>
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore type="primary"
							:disabled="true"
							:status="1"></t-loadmore>
			</view>
		</introduction>

		<introduction title="点击效果">
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore :hover="true"
							:status="2"></t-loadmore>
			</view>
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore :hover="false"
							:status="2"></t-loadmore>
			</view>
		</introduction>

		<introduction title="主题效果">
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore effect="normal"
							:status="2"></t-loadmore>
			</view>
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore effect="dark"
							:status="2"></t-loadmore>
			</view>
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore effect="light"
							:status="2"></t-loadmore>
			</view>
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore effect="plain"
							:status="2"></t-loadmore>
			</view>
		</introduction>

		<introduction title="跳转路径">
			<view class="r-10 p-10 mb-15 fc">
				<t-loadmore path="/pages/index/index"
							:status="2"></t-loadmore>
			</view>
		</introduction>
	</view>
</template>

<script setup>
</script>

t-loadmore 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	"页面有限，服务不止"	没有更多的显示文本	-

t-loadmore Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

Status 说明

状态值	说明	显示文本
0	加载前	loadmoreText
1	加载中	loadingText
2	没有更多	nomoreText