Vue项目中使用vue-infinite-loading插件实现页面数据滚动加载更多-使用案例

Posted 2021-09-01 JackieDYH

安装-官网 

npm install vue-infinite-loading -S
or
<script src="https://unpkg.com/vue-infinite-loading@^2/dist/vue-infinite-loading.js"></script>

vue中使用

引入 

//vue中在main.js 引入
// 滚动加载数据
import InfiniteLoading from 'vue-infinite-loading';
Vue.use(InfiniteLoading, { /* options */ });

组件使用

<template>
  <div class="test">
    <p class="list" v-for="(item, index) in list" :key="index">
      {{ item.address }}
      <img :src="item.image" />
    </p>
    <infinite-loading
      spinner="spiral"
      @infinite="infiniteHandler"
      :distance="200"
      class="infinite-loading-wrap"
    >
      <!-- <div slot="spinner">Loading...</div> -->
      <div slot="no-more">No more Data</div>
      <div slot="no-results">No results Data</div>
      <div slot="error" slot-scope="{ trigger }">
        Error Data, click <a href="javascript:;" @click="trigger">here</a> toretry
      </div>
    </infinite-loading>
  </div>
</template>

<style lang="scss" scoped>
.test {
  display: flex;
  flex-wrap: wrap;
}
.list {
  display: flex;
  align-content: center;
  flex-direction: column;
  font-size: 20px;
  img {
    width: 300px;
  }
}
</style>

<script>
import InfiniteLoading from "vue-infinite-loading";
export default {
  components: {
    InfiniteLoading,
  },
  data() {
    return {
      page: 1,
      list: [ //默认数据
        {
          id: 62,
          name: null,
          address: "0xb9b********dC517",
          price: 7080,
          image:
            "http://*********1000023_336_71_30_262626_303030.jpg",
          status: 3,
          chain_id: 62,
          collect_times: 0,
        },
      ],
    };
  },
  computed: {},
  mounted() {
    this.goApi();
  },
  methods: {
    async goApi() {
      const res = await this.$axios.workList({ page: this.page });
      console.log(res, 5888);
      this.list.push(...res.data.list); //追加数据
    },
    async infiniteHandler($state) {
      const res = await this.$axios.workList({ page: this.page, pagesize: 50 });
      if (res.data.list.length) {
        this.page += 1; // 下一页
        this.list = this.list.concat(res.data.list);
        $state.loaded();
      } else {
        $state.complete();
      }
    },
  },
  beforeDestroy() {},
};
</script>