vant+vue实现上拉加载

上拉加载数据

直接上代码吧，毕竟这个才是重点呐

   <List
      v-model="loading"
      :finished="finished"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      @load="onLoad"
    >
       <div
          class="list"
          v-for="(item, index) in elseLive"
          :key="index"
          @click="toDetail(item)"
       >
          <div class="list_title">{{ item.title }}</div>
          <div class="list_date">
             {{ getday(item.startTime, 'yyyy.mm.dd hh:mm') }}
          </div>
       </div>
   </List>

<script>
// 1.引入vant 的list列表

import Vue from 'vue';
import { CountDown, Dialog, List } from 'vant';
export default {
  name: 'MainTitle',
  components: { List },
  data(){
     // 2.data里面写状态
  	 // 是否结束上拉加载
      finished: false,
      // 是否正在上拉加载
      loading: false,
      // 错误
      error: false,
  },
  // 挂载后
  mounted(){
  // 在这我已经获取到了第一页的数据了
  }
  // 函数方法
  methods:{
   // 获取列表数据
   getList() {
      let data = {
        pageTo: this.pageTo,  // 页数
        pageSize: this.pageSize // 个数
      };
      this.$axios
        .post('接口', data)
        .then(res => {
          console.log(res.data.data.elseLive);
          let rows = res.data.data.elseLive; // 请求返回当页的页面列表

          this.loading = false;
          this.total = res.data.data.totalItemCount; // 总条数

          if (rows == null || rows.length === 0) {
            // 加载结束
            this.finished = true;
            return;
          }

          // 将新数据与老数据进行合并
          this.elseLive = this.elseLive.concat(rows);

          // 如果列表数据条数>=总条数，不再触发滚动加载
          if (this.elseLive.length >= this.total) {
            this.finished = true;
          }
        });
    },
    onLoad(){
    this.pageTo++; // 页数+1
    this.getList()
    }

  }
  
</script>

好了，大体上就这些了。
感谢观看，如有什么问题的话，可以指正一下。