xtf-pull-refresh

组件说明

xtf-pull-refresh 是基于原生 scroll-view refresher 的下拉刷新容器，适用于内容流刷新，并保留滚动容器能力。 核心能力以当前 xtf-pull-refresh.vue 源码为准。

---

基础用法

1. 基础用法

最小配置下即可完成常见业务交互：

<template>
  <xtf-pull-refresh :triggered="value" @refresh="onEvent">
    <xtf-cell title="下拉刷新内容"
  /></xtf-pull-refresh>
</template>

<script>
export default {
  data() {
    return { value: false }
  },
  methods: {
    onEvent(payload) {
      console.log('组件事件', payload)
    }
  }
}
</script>

2. 核心交互

监听组件事件并维护页面状态：

<template>
  <xtf-pull-refresh
    variant="swipe"
    indicator-style="material"
    :triggered="value"
    @refresh="onEvent"
  >
    <xtf-cell title="Material 指示器"
  /></xtf-pull-refresh>
</template>

<script>
export default {
  data() {
    return { value: false }
  },
  methods: {
    onEvent(payload) {
      console.log('组件事件', payload)
    }
  }
}
</script>

3. 进阶配置

组合布局、样式或插槽能力：

<template>
  <xtf-pull-refresh :triggered="value" @refresh="onEvent">
    <template #head="{ triggered, pullText, loadingText }">
      <xtf-text :text="triggered ? loadingText : pullText"
    /></template>
    <xtf-cell title="自定义刷新头"
  /></xtf-pull-refresh>
</template>

<script>
export default {
  data() {
    return { value: false }
  },
  methods: {
    onEvent(payload) {
      console.log('组件事件', payload)
    }
  }
}
</script>

---

全部属性

属性	类型	默认值	作用描述	适用范围
triggered	Boolean, default: false	false	控制组件的 triggered 行为。	按业务需要设置。
error	Boolean, default: false	false	控制组件的 error 行为。	按业务需要设置。
disabled	Boolean, default: false	false	控制组件的 disabled 行为。	按业务需要设置。
scrollX	Boolean, default: false	false	控制组件的 scrollX 行为。	按业务需要设置。
scrollY	Boolean, default: true	true	控制组件的 scrollY 行为。	按业务需要设置。
scrollTop	[String, Number], default: ''	''	控制组件的 scrollTop 行为。	按业务需要设置。
scrollLeft	[String, Number], default: ''	''	控制组件的 scrollLeft 行为。	按业务需要设置。
scrollIntoView	String, default: ''	''	控制组件的 scrollIntoView 行为。	按业务需要设置。
scrollWithAnimation	Boolean, default: false	false	控制组件的 scrollWithAnimation 行为。	按业务需要设置。
upperThreshold	[String, Number], default: 50	50	控制组件的 upperThreshold 行为。	按业务需要设置。
lowerThreshold	[String, Number], default: 50	50	控制组件的 lowerThreshold 行为。	按业务需要设置。
enableBackToTop	Boolean, default: false	false	控制组件的 enableBackToTop 行为。	按业务需要设置。
immediateCheck	Boolean, default: false	false	控制组件的 immediateCheck 行为。	按业务需要设置。
triggerDistance	[String, Number], default: 100	100	控制组件的 triggerDistance 行为。	按业务需要设置。
pullText	String, default: ''	''	控制组件的 pullText 行为。	按业务需要设置。
pullingText	String, default: ''	''	控制组件的 pullingText 行为。	按业务需要设置。
loosingText	String, default: ''	''	控制组件的 loosingText 行为。	按业务需要设置。
releaseText	String, default: ''	''	控制组件的 releaseText 行为。	按业务需要设置。
loadingText	String, default: ''	''	控制组件的 loadingText 行为。	按业务需要设置。
successText	String, default: ''	''	控制组件的 successText 行为。	按业务需要设置。
errorText	String, default: ''	''	控制组件的 errorText 行为。	按业务需要设置。
retryText	String, default: ''	''	控制组件的 retryText 行为。	按业务需要设置。
successDuration	Number, default: 360	360	控制组件的 successDuration 行为。	按业务需要设置。
headHeight	[String, Number], default: ''	''	控制组件的 headHeight 行为。	按业务需要设置。
variant	String, default: 'minimal'	'minimal'	控制组件的 variant 行为。	按业务需要设置。
indicatorStyle	String, default: ''	''	控制组件的 indicatorStyle 行为。	按业务需要设置。
shape	String, default: 'round'	'round'	控制组件的 shape 行为。	按业务需要设置。
size	String, default: 'md'	'md'	控制组件的 size 行为。	按业务需要设置。
loadingType	String, default: ''	''	控制组件的 loadingType 行为。	按业务需要设置。
loadingTheme	String, default: 'primary'	'primary'	控制组件的 loadingTheme 行为。	按业务需要设置。
textColor	String, default: ''	''	控制组件的 textColor 行为。	按业务需要设置。
headGap	[String, Number], default: ''	''	控制组件的 headGap 行为。	按业务需要设置。
headPadding	[String, Number], default: ''	''	控制组件的 headPadding 行为。	按业务需要设置。
headRadius	[String, Number], default: ''	''	控制组件的 headRadius 行为。	按业务需要设置。
backgroundColor	String, default: ''	''	控制组件的 backgroundColor 行为。	按业务需要设置。
refresherBackground	String, default: ''	''	控制组件的 refresherBackground 行为。	按业务需要设置。
transparent	Boolean, default: false	false	控制组件的 transparent 行为。	按业务需要设置。
borderColor	String, default: ''	''	控制组件的 borderColor 行为。	按业务需要设置。
shadow	String, default: ''	''	控制组件的 shadow 行为。	按业务需要设置。
customClass	String, default: ''	''	控制组件的 customClass 行为。	按业务需要设置。
customStyle	[String, Object], default: ''	''	控制组件的 customStyle 行为。	按业务需要设置。
headClass	String, default: ''	''	控制组件的 headClass 行为。	按业务需要设置。
headStyle	[String, Object], default: ''	''	控制组件的 headStyle 行为。	按业务需要设置。
textClass	String, default: ''	''	控制组件的 textClass 行为。	按业务需要设置。
textStyle	[String, Object], default: ''	''	控制组件的 textStyle 行为。	按业务需要设置。

---

事件

事件名称	触发时机	回调参数	参数说明
pulling	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('pulling', ...) 为准。
refresh	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('refresh', ...) 为准。
restore	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('restore', ...) 为准。
abort	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('abort', ...) 为准。
retry	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('retry', ...) 为准。
scroll	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('scroll', ...) 为准。
scrolltoupper	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('scrolltoupper', ...) 为准。
scrolltolower	对应交互或状态变化时触发。	payload	参数形状以源码 $emit('scrolltolower', ...) 为准。

事件使用示例

<template>
  <xtf-pull-refresh @pulling="onEvent" />
</template>
<script>
export default {
  methods: {
    onEvent(payload) {
      console.log('收到事件', payload)
    }
  }
}
</script>

---

插槽

插槽名	说明	作用域参数
default	刷新容器内的滚动内容。	无
head	自定义下拉刷新头部。	triggered、pullText、loadingText、errorText、retryText、pullProgress、pullingDistance、refreshPhase、retry

---

方法

retryRefresh()：触发重试刷新。

使用示例：

this.$refs.pullRefresh.retryRefresh()

---

主题说明

• var(--xtf-motion-fast) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-motion-standard) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-motion-spring) 参与组件的颜色、背景、边框或动效呈现。
• var(--xtf-color-primary) 参与组件的颜色、背景、边框或动效呈现。
• 视觉变体的可选值以 variant、theme、layout 等属性在源码中的分支为准。

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。