Vant --- detailed explanation and use of list component in vant

<template>
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text=" There is no more "
    @load="onLoad"
  >
    <van-cell v-for="item in list" :key="item.id" :title="item.title" />
  </van-list>
</template>

<script>
import { getArticles } from '../../../api/article'
export default {
  name: 'ArticleList',

  data() {
    return {
      // Array stored to list data 
      list: [],
      // Control loading loading state 
      loading: false,
      // Control the status of the end of data loading 
      finished: false,
      // Request to get the timestamp of the next page of data 
      timestamp: null
    };
  },

  mounted() {

  },
  props: {
    channel: {
      type: Object,
      require: true
    }
  },
  methods: {
    //  When initializing or scrolling to the bottom, it will trigger the call onload()
    async onLoad() {
      try {
        // 1. Request for data 
        const { data } = await getArticles({
          channel_id: this.channel.id,
          timestamp: this.timestamp || Date.now()
        })
        console.log(data)
        // 2. Put the request result in list Array 
        const { results } = data.data
        this.list.push(...results)
        // 3. Set the loading status to end after this data loading 
        this.loading = false
        // 4. Determine whether all data is loaded 
        if (results.length) {
          //  Update the timestamp to get the data of the next page 
          this.timestamp = data.data.pre_timestamp
        } else {
          //  There's no data , take finished Set to true, No longer load Load more 
          this.finished = true
        }
      } catch (err) {
        console.log(' request was aborted ！')
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>