Refresh 下拉刷新

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="Refresher" class='p.30'>
		<t-card title="Refresher 刷新-加载" class="mb.30" sub-title="下拉刷新 和 上拉加载"></t-card>
		<t-section title="基础功能+主题展示" class="mb.30"></t-section>
		<t-row class="fc-tdr-tdb-tdp-mb.30">
			<t-refresher type="p" default-icon-class="mr.5-s.35"></t-refresher>
		</t-row>
		<t-row class="fc-tdr-tdb-tdp-mb.30">
			<t-refresher type="error" default-icon-class="mr.5-s.35"></t-refresher>
		</t-row>
		<t-section title="布局方向调整" class="mb.30"></t-section>
		<t-row class="fc-tdr-tdb-tdp-mb.30">
			<t-refresher type="p" :vertical="false"></t-refresher>
		</t-row>
		<t-row class="fc-tdr-tdb-tdp-mb.30">
			<t-refresher type="error" :vertical="false"></t-refresher>
		</t-row>

		<t-section title="状态" class="mb.30"></t-section>
		<t-row class="fc-tdr-tdb-tdp-mb.30">
			<t-refresher type="p" :state="0"></t-refresher>
		</t-row>
		<t-row class="fc-tdr-tdb-tdp-mb.30">
			<t-refresher type="p" :state="1"></t-refresher>
		</t-row>
		<t-row class="fc-tdr-tdb-tdp-mb.30">
			<t-refresher type="p" :state="2"></t-refresher>
		</t-row>
		<t-row class="fc-tdr-tdb-tdp-mb.30">
			<t-refresher type="p" :state="3"></t-refresher>
		</t-row>
	</t-page>
</template>

Props

名称	描述	类型	默认值
vertical	控制下拉刷新的方向，默认为垂直方向	Boolean	true
state	表示当前刷新状态，默认为0	Number	0
defaultIcon	默认状态下的图标，默认为'arrow-down-circle'	String	'arrow-down-circle'
defaultIconClass	默认图标的额外类名	String	''
pullingIcon	下拉状态下的图标，默认为'arrow-up-circle'	String	'arrow-up-circle'
pullingIconClass	下拉图标的额外类名	String	''
refreshingIcon	刷新状态下的图标，默认为'spinner'	String	'spinner'
refreshingIconClass	刷新图标的额外类名	String	''
refreshingEndIcon	刷新完成状态下的图标，默认为'checkbox-mark'	String	'checkbox-mark'
refreshingEndIconClass	刷新完成图标的额外类名	String	''
defaultText	默认状态下的文本，默认为'继续下拉刷新'	String	'继续下拉刷新'
pullingText	下拉状态下的文本，默认为'松开立即刷新'	String	'松开立即刷新'
refreshingText	刷新状态下的文本，默认为'正在刷新'	String	'正在刷新'
refreshingEndText	刷新完成状态下的文本，默认为'刷新成功'	String	'刷新成功'
textClass	文本的额外类名	String	''