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

最新推荐文章于 2024-08-08 08:32:05 发布

JackieDYH

最新推荐文章于 2024-08-08 08:32:05 发布

阅读量1.7k

点赞数

分类专栏： Vue 文章标签： infiniteloading vue 数据懒加载页面滚动加载数据

本文链接：https://blog.csdn.net/JackieDYH/article/details/119247327

版权

Vue 专栏收录该内容

363 篇文章

订阅专栏

本文介绍了如何在Vue.js应用中集成和使用vue-infinite-loading插件，实现页面内容的无限滚动加载。通过在main.js中引入组件，并在具体组件中设置无限滚动的触发事件、距离和状态处理，可以轻松实现数据的分页加载。同时，提供了详细的代码示例，包括模板、样式和脚本部分，展示了如何结合axios获取数据并更新列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装-官网

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>