catalogue

1. Pull up loading

2. Pull down refresh

3. Synchronous use of pull-up loading and pull-down refresh

4.props API

 1. Pull up loading

<van-list
  v-model="loading"
  :finished="finished"
  finished-text="No more"
  @load="onLoad"
>
  <van-cell v-for="item in list" :key="item" :title="item" />
</van-list>

export default {
  data() {
    return {
      list:[],
      loading: true,
      finished: false
    }
  },
methods: {
    onLoad() {
      // Update data asynchronously
      // An axios request function
      const {data:res} = await initList(){}

      //Store data behind array
      this.list = [...this.list,...res]

      // End of loading status
      this.loading = false

      //If the requested data is empty
      if (res.length === 0) {
        this.finished = true
      }
  },
};

Among them, loading is a Boolean value, which represents the loading state. When we start loading, its value changes from false to true. When the request ends, its value changes from true to false.

Similarly, finish is also a Boolean value, which represents whether the data has been fully loaded. If the data has been fully loaded and there is no new data to request, the value of finished is changed to true.

The value of finished text is the prompt when it is fully loaded.

Note: when the default value of loading is false, an onLoad event will be triggered automatically when the page is just loaded. When the default value is true, it will not be triggered.

2. Pull up refresh

<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-cell v-for="item in list" :key="item" :title="item" />
</van-pull-refresh>

export default {
  data() {
    return {
      list:[],
      Loading: false,
      finished: false
    }
  },
  methods: {
    onRefresh() {
      // Update data asynchronously
      // An axios request function
      const {data:res} = await initList(){}

      //Store data in front of the array
      this.list = [...res,...this.list]

      // End of loading status
      this.loading = false

      //If the requested data is empty
      if (res.length === 0) {
        this.finished = true
      }
  }
};

Among them, loading is a Boolean value, which represents the refresh status. When we start the refresh, its value changes from false to true. When the refresh ends, its value changes from true to false.

Similarly, finish is also a Boolean value, which represents whether the data has been fully loaded. If the data has been fully loaded and there is no new data to request, the value of finished is changed to true.

3. Synchronous use of pull-up loading and pull-down refresh

<van-pull-refresh v-model="refreshing" @refresh="onRefresh" :disabled='finished'>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="No more"
    @load="onLoad"
  >
    <van-cell v-for="item in list" :key="item" :title="item" />
  </van-list>
</van-pull-refresh>

export default {
  data() {
    return {
      list: [],
      loading: true,
      finished: false,
      refreshing: false,
    };
  },
  methods: {
    onLoad() {
      // Update data asynchronously
      // An axios request function
      const {data:res} = await initList(){}

      //Store data behind array
      this.list = [...this.list，...res]

      // End of loading status
      this.loading = false

      //If the requested data is empty
      if (res.length === 0) {
        this.finished = true
    },
    onRefresh() {
      // Update data asynchronously
      // An axios request function
      const {data:res} = await initList(){}

      //Store data in front of the array
      this.list = [...res,...this.list]

      // End of loading status
      this.refreshing = false

      //If the requested data is empty
      if (res.length === 0) {
        this.finished = true
    }
  }
};

Note: in the < van pull refresh > tab, we have added the disable attribute of vant official, which is used to disable the pull-down refresh function. When all our data has been requested, that is, finished === true, the pull-down refresh is not available.

4.props API

Here we will list the props API officially provided by vant

• List (pull-up loading)

  parameter	explain	type	Default value
  v-model	Whether it is in the loading state. The load event is not triggered during loading	boolean	false
  finished	Whether the loading is completed. The load event will not be triggered after the loading is completed	boolean	false
  error	Whether the loading fails. After the loading fails, click the error prompt to restart The sync modifier must be used to trigger the load event	boolean	false
  offset	The load event is triggered when the distance between the scroll bar and the bottom is less than offset	number | string	300
  loading-text	Prompt copy during loading	string	Loading
  finished-text	Prompt copy after loading	string	-
  error-text	Prompt copy after loading failure	string	-
  immediate-check	Do you want to perform a scroll position check immediately on initialization	boolean	true
  direction	The direction of scrolling trigger loading. The optional value is up	string	down

• PullRefresh

  parameter	explain	type	Default value
  v-model	Is it loading	boolean	-
  pulling-text	Drop down process prompt copy	string	Pull down to refresh
  loosing-text	Release process prompt copy	string	Release to refresh
  loading-text	Loading process prompt copy	string	Loading
  success-text	Refresh successful prompt copy	string	-
  success-duration	Display duration of refresh success prompt (ms)	number | string	500
  animation-duration	Animation duration	number | string	300
  head-height	Top content height	number | string	50
  pull-distance v2.12.8	Distance to trigger pull-down refresh	number | string	Consistent with {head height}
  disabled	Disable pull-down refresh	boolean	false