vue基于vant组件，在h5中实现分页效果

vue项目中基于vant组件，在h5中实现分页效果

使用vant中组件中List组件直接上代码，不懂可以私信。

<template>
  <div class="box">
      <van-list :immediate-check="false" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      //list中包裹的代码体，根据实际情况自己定义
      //主要原理：list组件包裹代码体，用@load="onLoad"绑定的这个事件再去请求下数据，并加以判断
        <van-steps direction="vertical">
          <van-step v-for="(item, index) in datas" :key="index">
            <div class="one">{{ item.created_at | dataFormat }}</div>
            <p class="two">{{ item.ex_name }}</p>
            <p class="three">{{ item.title }}</p>
            <a class="four" href="#">{{ item.link }}</a
            ><br />
          </van-step>
        </van-steps>
      </van-list>
  </div>
</template>

<script>
//报错的话就拿掉不需要的组件
import {  Toast, Step, Steps, List } from 'vant';
export default {
  name: 'App',
  components: {
    [Step.name]: Step,
    [Steps.name]: Steps,
    [List.name]: List,
  },
  data() {
    return {
      loading: false,
      finished: false,
      page: 1,
      datas: [],
    };
  },
  created() {
    this.list();
  },
  methods: {
  //list事件，可参考文档
    onLoad() {
      let that = this;
      that.loading = true;
      // console.log(++that.page);
      this.$ajax('?s=App.Index.Notice', { page: ++this.page }, function (res) {
        if (res.code == 200) {
          that.loading = false;
          if (res.data.data.length > 0) {
            that.datas = that.datas.concat(res.data.data);
          } else {
            that.finished = true;
          }
        }
      });
    },
    //要请求的数据
    list() {
      this.$ajax('?s=App.Index.Notice', { page: this.page }, function (res) {
        if (res.code == 200) {
          this.datas = res.data.data;
        }
      });
    },
  },
};
</script>