vue开发使用上拉加载更多之vue-infinite-scroll

官网链接：https://github.com/ElemeFE/vue-infinite-scroll

下载依赖

cnpm  i vue-infinite-scroll --save

在min.js中引入相对应的组件

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

使用

1. vue页面使用

<template>
	<div>
	  <ul v-infinite-scroll="findShopListByEs" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
	    <li v-for="(item, index) in ShopListByEs" :key="index">
	      	{{ item.name }}
	      </div>
	    </li>
	  </ul>
	</div>
</template>

2. data内定义

export default {
  data() {
    return {
      ShopListByEs: [], // 循环的数组内容
      pageNo: 0, // 传参使用的页码
      loading: false, // 是否执行上拉加载
    };
  },
}

3. 方法使用

findShopListByEs() {
      this.loading = true;
      this.pageNo = this.pageNo + 1; // 页码递增
      let _url = "这里是接口";
      let _param = {
        pageNo: this.pageNo, //页码
        pageSize: 10,	// 加载条数
      };
      this.$http.post(_url, _param).then((res) => {
      	// 判断接口是否调通，接口内是否有数据，数组内是否由内容
        if (
          res.data.retCode == 1 &&
          !!res.data.data.items &&
          !!res.data.data.items.length > 0
        ) {
        // 数组内有内容，则可以直接开始使用，使用for循环的目的是页面数据会递增
		// 错误的使用方式   this.ShopListByEs = res.data.data.items; 这样只会展示当前调用接口的内容
          for (let i = 0; i < res.data.data.items.length; i++) {
            if (!!res.data.data.items[i].tags) {
              res.data.data.items[i].tags = res.data.data.items[i].tags.split(
                " "
              );
            }
            this.ShopListByEs.push(res.data.data.items[i]);
          }
          // 判断当前页码和总页码，当前页码小于总页码则执行加载更多，下面有介绍使用意义
          if (this.pageNo < res.data.data.pageCount) {
            this.loading = false;
          } else {
            this.loading = true;
          }
        }
      });
    },

解释用意

1. v-infinite-scroll="findShopListByEs"表示回调函数是findShopListByEs
2. infinite-scroll-disabled="loading "表示由变量loading决定是否执行findShopListByEs，false则执行findShopListByEs，true则不执行，看清楚，loading表示繁忙，繁忙的时候是不执行的。
3. infinite-scroll-distance="10"这里10决定了页面滚动到离页尾多少像素的时候触发回调函数，10是像素值。通常我们会在页尾做一个几十像素高的“正在加载中...”，这样的话，可以把这个div的高度设为infinite-scroll-distance的值即可。

其他选项

1. infinite-scroll-immediate-check 默认值为true，该指令意思是，应该在绑定后立即检查loading 的值和是否滚动到底。如果你的初始内容高度不够高、不足以填满可滚动的容器的话，你应设为true，这样会立即执行一次findShopListByEs，会帮你填充一些初始内容。
2. infinite-scroll-listen-for-event 当事件在Vue实例中发出时，无限滚动将再次检查。
3. infinite-scroll-throttle-delay 检查loading 的值的时间间隔，默认值是200，因为vue-infinite-scroll的基础原理就是，vue-infinite-scroll会循环检查loading 的值，以及是否滚动到底，只有当：loading 为false且滚动到底，回调函数才会执行。