2-11 vant-ui实现上拉刷新

<template>
  <div class="home">
    <van-list
      class="home"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item of playlists" :key="item.id">
        <img class="item" v-lazy="item.coverImgUrl" alt="" />
        <p>{{ item.name }}</p>
      </van-cell>
    </van-list>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      playlists: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
       console.log(1)
      setTimeout(() => {
        var offset = this.playlists.length;
        this.axios.get(`http://47.108.197.28:3000/top/playlist?offset=${offset}&limit=20`).then((res) => {
          // console.log(res.data.playlists);
          var playlists = this.playlists.concat(res.data.playlists);
          this.playlists =  playlists;
          this.loading = false;
        });
      }, 500);
    },
  },
};
</script>
<style scoped>
.item {
  width: 150px;
  height: 150px;
}
.home {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.van-cell {
  width: 150px;
}
</style>