mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-26 11:26:35 +08:00

docs: change slot to # (#5858 )

* docs(SwipeCell): change "slot" to "v-slot"

* docs(SwipeCell): change `v-slot` to`#`

* docs(cell): change `slot` to `#`

* docs(checkbox): change `slot` to `v-slot`

* docs(field): change `slot` to `v-slot`

* docs(checkbox): remove wrong comment

* docs(radio): change `slot` to `#`

* docs(search): change `slot` to `#`

* docs(slider): change `slot` to `#`

* docs(switch): change `slot` to `#`

* docs(PullRefresh): change `slot` to `#`

* docs(collapse): change `slot` to `#`

* docs(panel): change `slot` to `#`

* docs(swipe): change `slot` to `#`

* docs(navbar): change `slot` to `#`

* docs(tab): change `slot` to `#`

* docs(tabber): change `slot` to `#`

* docs(TreeSelect): change `slot` to `#`

* docs(card): change `slot` to `#`

* docs(submitBar): change `slot` to `#`

* docs(sku): change `slot` to `#` unsure

* docs(cell): delete waste blank line

* docs(panel): fix indentation

* docs(PullRefresh): change "count" to "Refresh Count"

* docs(radio): delete waste blank line

* docs(search): move props above the event

* docs(submitBar): delete waste `<span>`

* docs(swipCell): delete waste blank line

* docs(tabbar): merge `<img>` into one line

2020-03-20 14:12:00 +08:00

2.9 KiB

Raw Blame History

PullRefresh

Install

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

Vue.use(PullRefresh);

Usage

Basic Usage

The refresh event will be triggered when pull refresh, you should set v-model to false to reset loading status after process refresh event.

<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
  <p>Refresh Count: {{ count }}</p>
</van-pull-refresh>

import { Toast } from 'vant';

export default {
  data() {
    return {
      count: 0,
      isLoading: false
    }
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast('Refresh Success');
        this.isLoading = false;
        this.count++;
      }, 1000);
    }
  }
}

Success Tip

Use success-text to set the success prompt after the refresh is successful

<van-pull-refresh
  v-model="isLoading"
  success-text="Refresh success"
  @refresh="onRefresh"
>
  <p>Refresh Count: {{ count }}</p>
</van-pull-refresh>

Custom Tips

Use slots to custom tips

<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
  <template #pulling="props">
    <img
      class="doge"
      src="https://img.yzcdn.cn/vant/doge.png"
      :style="{ transform: `scale(${props.distance / 80})` }"
    />
  </template>

  <template #loosing>
    <img
      class="doge"
      src="https://img.yzcdn.cn/vant/doge.png"
    />
  </template>  

  <template #loading>
    <img
      class="doge"
      src="https://img.yzcdn.cn/vant/doge-fire.jpg"
    />
  </template>
  <p>Refresh Count: {{ count }}</p>
</van-pull-refresh>

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

API

Props

Attribute	Description	Type	Default
v-model	Loading status	boolean	-
pulling-text	Text to show when pulling	string	`Pull to refresh...`
loosing-text	Text to show when loosing	string	`Loose to refresh...`
loading-text	Text to show when loading	string	`Loading...`
success-text	Text to show when loading success	string	-
success-duration	Success text display duration(ms)	number \| string	`500`
animation-duration	Animation duration	number \| string	`300`
head-height `v2.4.2`	Height of head	number \| string	`50`
disabled	Whether to disable pull refresh	boolean	`false`

Events

Event	Description	Parameters
refresh	Triggered when pull refresh	-

Slots

Name	Description	SlotProps
default	Default slot	-
normal	Content of head when at normal status	-
pulling	Content of head when at pulling	{ distance }
loosing	Content of head when at loosing	{ distance }
loading	Content of head when at loading	{ distance }
success	Content of head when succeed	-

2.9 KiB Raw Blame History