t-refresher

Refresher 下拉刷新

组件介绍

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

平台兼容

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

基础用法

基础用法参考 demo/refresher/refresher.uvue，配合 t-list 组件使用。

<template>
  <t-list 
    :refresher-enabled="true"
    @refresherrefresh="onRefresh"
    @refresherrestore="onRestore">
    <template #refresher>
      <t-refresher 
        :state="refreshState"
        @click="onRefreshClick">
      </t-refresher>
    </template>
    <!-- 列表内容 -->
  </t-list>
</template>

<script setup>
const refreshState = ref(0)

function onRefresh() {
  refreshState.value = 2
  // 模拟请求数据
  setTimeout(() => {
    refreshState.value = 4
  }, 1500)
}

function onRestore() {
  refreshState.value = 0
}
</script>

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	松开后执行操作成功状态