Vue自动翻页插件简易教程（vue-infinite-loading）

朱雀 2023-06-23 04:57 22阅读 0赞

背景略。

## 安装 ##

插件首页：

https://www.npmjs.com/package/vue-infinite-loading

安装方法：

npm i vue-infinite-loading -S

## 使用方法 ##

下面我们来演示如何使用Vue的这个插件实施无限级加载（自动翻页）功能；

首先，我们需要写一个模板，代码如下：

在上面的模板中，我们放了一个`infinite-loading`组件在新闻列表的底部，同时用’handleLoad’方法来注册它的`infinite`事件监听；

下面，是一些核心代码逻辑；

import axios from 'axios';
    
    const api = '//hn.algolia.com/api/v1/search_by_date?tags=story';
    
    export default { 
      data() { 
        return { 
          page: 1,
          list: [],
        };
      },
      methods: { 
        handleLoad($state) { 
          axios.get(api, { 
            params: { 
              page: this.page,
            },
          }).then(({  data }) => { 
            if (data.hits.length) { 
              this.page += 1;
              this.list.push(...data.hits);
              $state.loaded();
            } else { 
              $state.complete();
            }
          });
        },
      },
    };

在上面的脚本中，我们使用了`HN Search API`和`axios`来获取新闻数据。如果API返回一个有非空数组，我们把它直接放入`list`，同时记录当前页码，通过`$state.loaded`方法告诉插件我们得到了一些数据。如果服务端接口返回了一个空数组，我们通过`$state.complete`方法告诉插件所有的数据都被加载了。

完。