Vant4 PullRefresh 下拉刷新

2023-02-16 17:55 更新

介紹

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

引入

通過(guò)以下方式來(lái)全局注冊(cè)組件,更多注冊(cè)方式請(qǐng)參考組件注冊(cè)

import { createApp } from 'vue';
import { PullRefresh } from 'vant';

const app = createApp();
app.use(PullRefresh);

代碼演示

基礎(chǔ)用法

下拉刷新時(shí)會(huì)觸發(fā) ?refresh? 事件,在事件的回調(diào)函數(shù)中可以進(jìn)行同步或異步操作,操作完成后將 ?v-model? 設(shè)置為 ?false?,表示加載完成。

<van-pull-refresh v-model="loading" @refresh="onRefresh">
  <p>刷新次數(shù): {{ count }}</p>
</van-pull-refresh>
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const count = ref(0);
    const loading = ref(false);
    const onRefresh = () => {
      setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        count.value++;
      }, 1000);
    };

    return {
      count,
      loading,
      onRefresh,
    };
  },
};

成功提示

通過(guò) ?success-text? 可以設(shè)置刷新成功后的頂部提示文案。

<van-pull-refresh
  v-model="isLoading"
  success-text="刷新成功"
  @refresh="onRefresh"
>
  <p>刷新次數(shù): {{ count }}</p>
</van-pull-refresh>

自定義提示

通過(guò)插槽可以自定義下拉刷新過(guò)程中的提示內(nèi)容。

<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
  <!-- 下拉提示,通過(guò) scale 實(shí)現(xiàn)一個(gè)縮放效果 -->
  <template #pulling="props">
    <img
      class="doge"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png" rel="external nofollow"  rel="external nofollow" 
      :style="{ transform: `scale(${props.distance / 80})` }"
    />
  </template>

  <!-- 釋放提示 -->
  <template #loosing>
    <img
      class="doge"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png" rel="external nofollow"  rel="external nofollow" 
    />
  </template>

  <!-- 加載提示 -->
  <template #loading>
    <img
      class="doge"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg" rel="external nofollow" 
    />
  </template>
  <p>刷新次數(shù): {{ count }}</p>
</van-pull-refresh>

<style>
  .doge {
    width: 140px;
    height: 72px;
    margin-top: 8px;
    border-radius: 4px;
  }
</style>

API

Props

參數(shù) 說(shuō)明 類(lèi)型 默認(rèn)值
v-model 是否處于加載中狀態(tài) boolean -
pulling-text 下拉過(guò)程提示文案 string 下拉即可刷新...
loosing-text 釋放過(guò)程提示文案 string 釋放即可刷新...
loading-text 加載過(guò)程提示文案 string 加載中...
success-text 刷新成功提示文案 string -
success-duration 刷新成功提示展示時(shí)長(zhǎng)(ms) number | string 500
animation-duration 動(dòng)畫(huà)時(shí)長(zhǎng) number | string 300
head-height 頂部?jī)?nèi)容高度 number | string 50
pull-distance v3.0.8 觸發(fā)下拉刷新的距離 number | string 與 head-height 一致
disabled 是否禁用下拉刷新 boolean false

Events

事件名 說(shuō)明 回調(diào)參數(shù)
refresh 下拉刷新時(shí)觸發(fā) -
change v3.5.1 拖動(dòng)時(shí)或狀態(tài)改變時(shí)觸發(fā) { status: string, distance: number }

Slots

名稱(chēng) 說(shuō)明 參數(shù)
default 自定義內(nèi)容 -
normal 非下拉狀態(tài)時(shí)頂部?jī)?nèi)容 -
pulling 下拉過(guò)程中頂部?jī)?nèi)容 { distance: number }
loosing 釋放過(guò)程中頂部?jī)?nèi)容 { distance: number }
loading 加載過(guò)程中頂部?jī)?nèi)容 { distance: number }
success 刷新成功提示內(nèi)容 -

類(lèi)型定義

組件導(dǎo)出以下類(lèi)型定義:

import type { PullRefreshProps } from 'vant';

主題定制

樣式變量

組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請(qǐng)參考 ConfigProvider 組件。

名稱(chēng) 默認(rèn)值 描述
--van-pull-refresh-head-height 50px -
--van-pull-refresh-head-font-size var(--van-font-size-md) -
--van-pull-refresh-head-text-color var(--van-text-color-2) -
--van-pull-refresh-loading-icon-size 16px -

常見(jiàn)問(wèn)題

PullRefresh 的內(nèi)容未填滿屏幕時(shí),只有一部分區(qū)域可以下拉?

默認(rèn)情況下,下拉區(qū)域的高度是和內(nèi)容高度保持一致的,如果需要讓下拉區(qū)域始終為全屏,可以給 PullRefresh 設(shè)置一個(gè)與屏幕大小相等的最小高度:

<van-pull-refresh style="min-height: 100vh;" />

PullRefresh 的觸發(fā)條件是?

PullRefresh 的觸發(fā)條件是「父級(jí)滾動(dòng)元素的滾動(dòng)條在頂部位置」。

  • 如果最近一個(gè)可滾動(dòng)的父級(jí)元素是 ?window?,則要求 ?window.pageYOffset === 0?。
  • 如果最近一個(gè)可滾動(dòng)的父級(jí)元素是 ?Element?,則要求 ?Element.scrollTop === 0?。

在桌面端無(wú)法操作組件?

參見(jiàn)桌面端適配。


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)