Vue-vant implements pull-down refresh and pull-up load (TIPS)

The vant component library has a van-pull-refresh drop-down component in VUE. The van-list component is used to realize the page’s pull-refresh and pull-up loading. The principle is simple, and the applicable scenarios are displayed in the list page.

• Import components: List List, PullRefresh dropdown refresh (of course, in vue-CLI main.js global import vant can be directly called page, no need to import separately)

  import { PullRefresh , List } from 'vant'
  
  export default {
          components: {
                   PullRefresh,
                   List
      }
  }
  Copy the code

• HTML fragment reference component:

  <template> <div> <van-pull-refresh v-model="refreshing" @refresh="onrefresh"> <van-list v-model="loading" :finished="finished" Offset ="10" // The load event is triggered when the distance between the scroll bar and the bottom is smaller than offset :immediate-check="flase" // Whether to check the scroll position immediately upon initialization OnLoad () > <div> <ul V -for="(item,index) in list" :key="index">  <li>{{ item.content }}</li> </ul> </div> </van-list> </van-pull-refresh> </div> </template>Copy the code

• To define parameters in data, you need:

  Data () {return {list: [], // Loading: false, finished: false, // Whether the loading is complete and no load event is triggered after loading: False, // dropdown status listQuery: {page: 1, // current page number limit: 10, // display 10 pages}}; },Copy the code

• Javascript logic that uses the forEach() method to call each element of the array and pass the element to the callback function.

  mounted() { this.getList(); }, methods: {// load onLoad() {setTimeout(() => {this.getList (); }, 1000); }, // get the list getList() {// Request the list of meetings, If (this.listQuery. Page === 1) {if (this.listQuery. Page === 1) {if (this.listQuery. Page === 1) {if (this.listQuery. This.list = res.data.data} else {// If not, append data after,forEach() method res.data.data. ForEach () method res.data.data (item => {this.list.push(item)});  Page++ if (res.data.data.length > 0) {this.listquery.page ++; This.loading = false} else {// If no data is loaded this. }, // drop down to refresh onRefresh() {setTimeout(() => {this.listQuery.page = 1; this.getList(); this.refreshing = false; }, 1000); }}};Copy the code

The above is simple pull-down refresh and pull-up load pages, in addition to page++ if judgment changes according to the parameters passed by the back end, if the back end has the number of pages passed, of course, it is better to achieve and rigorous.