PullRefresh 下拉刷新

介绍

用于提供下拉刷新的交互操作。

代码演示

基础用法

下拉刷新时会触发 refresh 事件,在事件的回调函数中可以进行同步或异步操作,操作完成后将 v-model 设置为 false,表示加载完成。

<z-pull-refresh
  id="refresh1"
  v-model="loading"
  @refresh="onRefresh(true)"
>
  <z-cell
    v-for="item in 30"
    :key="item"
    :title="`单元格${item}`"
    value="内容"
  />
</z-pull-refresh>
import { ref } from 'vue'
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const loading = ref(false)
const onRefresh = (isShowToast: boolean) => {
  setTimeout(() => {
    if (isShowToast) {
      toast.showToast('刷新成功')
    }
    loading.value = false
    count.value++
  }, 1000)
}

成功提示

通过 success-text 可以设置刷新成功后的顶部提示文案。

<z-pull-refresh
  id="refresh2"
  v-model="loading"
  success-text="刷新成功"
  @refresh="onRefresh(false)"
>
  <z-cell
    v-for="item in 10"
    :key="item"
    :title="`单元格${item}`"
    value="内容"
  />
</z-pull-refresh>

自定义提示

通过插槽可以自定义下拉刷新过程中的提示内容。

<z-pull-refresh
  id="refresh3"
  v-model="loading"
  head-height="80"
  @refresh="onRefresh(true)"
>
  <template #pulling="{ distance }">
    <image
      class="doge"
      src="https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe1.jpg"
      :style="{ transform: `scale(${distance / 80})` }"
    />
  </template>
  <template #loosing>
    <image
      src="https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe1.jpg"
      class="doge"
    />
  </template>
  <template #loading>
    <image
      src="https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg"
      class="doge"
    />
  </template>
  <z-cell
    v-for="item in 2"
    :key="item"
    :title="`单元格${item}`"
    value="内容"
  />
</z-pull-refresh>
<style>
.demo-pull-refresh {
  .demo-pull-refresh {
    background-color: var(--z-background-2);

    .z-pull-refresh {
      height: calc(100vh - 100rpx);
    }

    .doge {
      width: 280rpx;
      height: 144rpx;
      margin-top: 16rpx;
      border-radius: 8rpx;
    }

    text {
      padding: var(--z-padding-md) 0 0 var(--z-padding-md);
      margin: 0;
    }
  }
}
</style>

API

Props

参数说明类型默认值
v-model是否处于加载中状态boolean-
pulling-text下拉过程提示文案string下拉即可刷新...
loosing-text释放过程提示文案string释放即可刷新...
loading-text加载过程提示文案string加载中...
success-text刷新成功提示文案string-
success-duration刷新成功提示展示时长(ms)number | string500
animation-duration动画时长number | string300
head-height顶部内容高度number | string50
pull-distance触发下拉刷新的距离number | stringhead-height 一致
disabled是否禁用下拉刷新booleanfalse

Events

事件名说明回调参数
refresh下拉刷新时触发-
change拖动时或状态改变时触发{ status: string, distance: number }

Slots

名称说明参数
default自定义内容-
normal非下拉状态时顶部内容-
pulling下拉过程中顶部内容
loosing释放过程中顶部内容
loading加载过程中顶部内容
success刷新成功提示内容-

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件

名称默认值描述
--z-pull-refresh-head-height100rpx-
--z-pull-refresh-head-font-sizevar(--z-font-size-md)-
--z-pull-refresh-head-text-colorvar(--z-text-color-2)-
--z-pull-refresh-loading-icon-size32rpx-