PullRefresh Pull down to refresh

introduce

Used to provide interactive operations for pull-down refresh.

Code Demo

Basic usage

The refresh event will be triggered when pulling down to refresh. Synchronous or asynchronous operations can be performed in the callback function of the event. After the operation is completed, v-model is set to false, indicating that the loading is completed.

<z-pull-refresh
   id="refresh1"
   v-model="loading"
   @refresh="onRefresh(true)"
>
   <z-cell
     v-for="item in 30"
     :key="item"
     :title="`Cell${item}`"
     value="content"
   />
</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('Refresh successful')
     }
     loading.value = false
     count.value++
   }, 1000)
}

Success Tips

Use success-text to set the top prompt text after successful refresh.

<z-pull-refresh
   id="refresh2"
   v-model="loading"
   success-text="Refresh successful"
   @refresh="onRefresh(false)"
>
   <z-cell
     v-for="item in 10"
     :key="item"
     :title="`Cell${item}`"
     value="content"
   />
</z-pull-refresh>

Custom prompts

The prompt content during the pull-down refresh process can be customized through the slot.

<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="`Cell${item}`"
     value="content"
   />
</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

ParametersDescriptionTypeDefault value
v-modelWhether it is loadingboolean-
pulling-textPrompt copy of the pull-down processstringPull down to refresh...
loose-textLoose process prompt copystringRelease to refresh...
loading-textLoading process prompt copystringLoading...
success-textRefresh success prompt copystring-
success-durationRefresh success prompt display duration (ms)number | string500
animation-durationanimation durationnumber | string300
head-heightTop content heightnumber | string50
pull-distanceDistance that triggers pull-down refreshnumber | stringConsistent with head-height
disabledWhether to disable pull-down refreshbooleanfalse

Events

Event nameDescriptionCallback parameters
refreshTriggered when pull-down to refresh-
changeTriggered when dragging or when the status changes{ status: string, distance: number }

Slots

NameDescriptionParameters
defaultcustom content-
normalTop content when not in pull-down state-
pullingTop content during pull-down process
LoosingTop content during release
loadingTop content during loading
successRefresh success prompt content-

Theme customization

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

NameDefaultDescription
--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-