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

淩亂°似流年 2022-08-29 10:57 390阅读 0赞

# 安装-[官网][Link 1]  #

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="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>

![20210730144843232.gif][]

[Link 1]: https://peachscript.github.io/vue-infinite-loading/
[20210730144843232.gif]: /images/20220829/e7c288d5bafa4b68b43fbf9560abec40.png

发表评论取消回复

表情：

评论列表（有 0 条评论，390人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue项目中实现页面跳转加载进度条（NProgress插件的使用）

*效果图** ![在这里插入图片描述][20190911182750480.jpg] 1、 npm install nprogress --save ...

客官°小女子只卖身不卖艺/ 2024年04月18日 20:58/ 0 赞/ 65 阅读

相关 Vue中点击加载更多滚动条滚动到页面最底部

<template> <div> <div class="table-container" ref="table-container">

淩亂°似流年/ 2023年10月11日 13:35/ 0 赞/ 52 阅读

相关 Vue---滚动时加载(懒加载)数据插件better-scroll

安装 better-scroll npm install better-scroll --save 页面导入并使用 <template>

清疚/ 2022年11月17日 14:53/ 0 赞/ 505 阅读

相关 vue 移动端加载更多分页组件_vue 分页加载数据页面滚动加载更多

组件源码 .vue文件 style="height:100%;overflow:auto" ref="filesTable" > ref="tableInner" c

小灰灰/ 2022年10月26日 14:09/ 0 赞/ 308 阅读

相关 Vue向下滚动加载更多数据-scroll-案例

vue-infinite-[scroll][] 安装 npm install vue-infinite-scroll --save > 尽管官方也推荐了几

男娘i/ 2022年09月03日 14:25/ 0 赞/ 896 阅读

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

安装-[官网][Link 1] npm install vue-infinite-loading -S or <script src="http

淩亂°似流年/ 2022年08月29日 10:57/ 0 赞/ 391 阅读

相关不用插件vue实现滚动加载

关键所在是实现滚动到底部，然后进行post请求，然后将获得的分页的数据push到数组中 1，在data中定义三个变量page,isadd,data\_wrpa其中page是控

╰+哭是因爲堅強的太久メ/ 2022年05月25日 14:38/ 0 赞/ 305 阅读

相关 vue实现滚动条加载更多数据

原理： 1、参考线位置lineHeight：即判断滚动到何处触发事件； 2、页面卷入的高度scrollHeight； 3、浏览器窗口的高度windowHeig

Myth丶恋晨/ 2022年04月06日 05:56/ 0 赞/ 569 阅读

相关 vue 实现滚动到页面底部开始加载更多

直接上代码： <template> <div class="newsList"> <div v-for="(items, index) i

快来打我*/ 2021年12月17日 08:47/ 0 赞/ 681 阅读

相关在Vue项目中使用smoothscroll-polyfill（页面平滑滚动）插件

smoothscroll-polyfill 是什么？它是一款纯JS页面的平滑滚动插件。该插件的特点是页面滚动的行为被作为window对象的扩展，用户可

迷南。/ 2021年11月22日 09:06/ 0 赞/ 694 阅读