# t-refresher

Refresher 下拉刷新

t-refresher 组件介绍

t-refresher 是下拉刷新组件，用于配合列表组件实现下拉刷新和上拉加载功能。

t-refresher 平台兼容

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

t-refresher 基础用法

基础用法参考 demo/refresher/refresher.uvue，配合列表组件使用，支持状态与布局方向配置。

<template>
	<view class='p-15'>
		<tui-theme-switch></tui-theme-switch>
		<t-card title="Refresher 刷新-加载"
				class="mb-15"
				sub-title="下拉刷新 和 上拉加载"></t-card>
		<t-section title="基础功能+主题展示"
				   class="mb-15"></t-section>
		<view :class="[`fc r-10 tvg p-10 mb-15`]">
			<t-refresher type="primary"
						 default-icon-class="mr-2 s-17"></t-refresher>
		</view>
		<view :class="[`fc r-10 tvg p-10 mb-15`]">
			<t-refresher type="error"
						 default-icon-class="mr-2-s-17"></t-refresher>
		</view>
		<t-section title="布局方向调整"
				   class="mb-15"></t-section>
		<view :class="[`fc r-10 tvg p-10 mb-15`]">
			<t-refresher type="primary"
						 :vertical="false"></t-refresher>
		</view>
		<view :class="[`fc r-10 tvg p-10 mb-15`]">
			<t-refresher type="error"
						 :vertical="false"></t-refresher>
		</view>

		<t-section title="状态"
				   class="mb-15"></t-section>
		<view :class="[`fc r-10 tvg p-10 mb-15`]">
			<t-refresher type="primary"
						 :state="0"></t-refresher>
		</view>
		<view :class="[`fc r-10 tvg p-10 mb-15`]">
			<t-refresher type="primary"
						 :state="1"></t-refresher>
		</view>
		<view :class="[`fc r-10 tvg p-10 mb-15`]">
			<t-refresher type="primary"
						 :state="2"></t-refresher>
		</view>
		<view :class="[`fc r-10 tvg p-10 mb-15`]">
			<t-refresher type="primary"
						 :state="3"></t-refresher>
		</view>
	</view>
</template>

t-refresher Props

属性名	说明	类型	默认值
state	当前刷新状态	number	1
vertical	是否纵向排列	boolean	true
defaultIcon	默认状态时的图标	string	'arrow-down-circle'
pullingIcon	下拉刷新时的图标	string	'arrow-up-circle'
refreshingIcon	刷新状态下的图标	string	'spinner'
refreshingEndIcon	刷新完成状态下的图标	string	'checkbox-mark'
defaultText	默认状态下的文本	string	'继续下拉刷新'
pullingText	下拉状态下的文本	string	'松开立即刷新'
refreshingText	刷新状态下的文本	string	'正在刷新'
refreshingEndText	刷新完成状态下的文本	string	'刷新成功'
iconClass	图标样式	string	-
textClass	文本的样式	string	-
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题	string	'normal'
size	组件尺寸	string	'mini'

state 状态值

值	说明
0	默认状态
1	下拉时候的状态
2	下拉到设置的距离后的状态
3	松开时的状态
4	松开后执行操作成功状态