1.使用vant中的list和PullRefresh组件

import { PullRefresh,List  } from 'vant';

Vue.use(PullRefresh).use(List);

 

2.代码demo

<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :offset="100"
      :immediate-check="false"
      ref="mylist"
    >
      <slot></slot>
    </van-list>
  </van-pull-refresh>
</template>

 <script>
export default {
  props: {
    url: {
      type: String,
      default: ""
    },
    pageNumber: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      totalPage: 0,
      currentPage: 1,
      //pageNumber:10,
      isLoading: false //控制下拉刷新的加载动画
    };
  },
  created() {
    this.init();
  },
  model: {
    name: "value",
    event: "updateList"
  },
  mounted() {},
  methods: {
    init() {
      let self = this;
      let data = {
        page: this.currentPage,
        row: this.pageNumber
      };
      self.$get(this.url, data).then(re => {
        if (self.refreshing) {
          self.refreshing = false;
          self.list = [];
        }
        self.totalPage = re.page;
        self.list = self.list.concat(re.data);
        self.loading = false;
        if (self.currentPage >= self.totalPage) {
          self.finished = true;
        }
        this.$emit("updateList", self.list);
      });
    },
    onLoad() {
      this.currentPage += 1;
      this.init();
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.currentPage = 1;
      this.init();
    }
  }
};
</script>

<style lang="scss">
</style>

 

详情请见：http://hcsy.gitee.io/advertisement/document/vant.html

 

 

 

 

 

 

 

 

 

链接地址

https://youzan.github.io/vant/#/zh-CN/intro