VUE用elementUI实现无限滚动组件（InfiniteScroll）

前言：一个页面引入无限滚动组件，把InfiniteScroll写成组件使用。这里只说明核心部分。(包含条件查询)

InfiniteScroll组件：包含了样式"加载中"、“没有更多数据”、"暂无数据"样式

一、这里是引入页面(这里简称为A)

1、A页面的html 部分(因为A需求有自己的页面加载样式，所以用display做了显示/隐藏处理)

      <div class="condition">
        <el-input placeholder="请输入访客姓名/电话/卡号"
                  prefix-icon="el-icon-search"
                  clearable
                  @input="searchEvent()"
                  v-model="search.keyWord">
        </el-input>
        <div class="select-css">
          <span>卡片状态</span>
          <el-select v-model="search.cardType"
                     @change="searchEvent()">
            <el-option v-for="item in CARD_STATUS"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
              <span style="height: 28px;font-size: 20px;font-family: PingFangSC-Regular, PingFang SC;
                           font-weight: 400;line-height: 28px;">
                {{item.label}}</span>
              <img v-if="search.cardType === item.value"
                   style="float: right;margin-top: 16px;"
                   src="./img/Stroke.svg">
            </el-option>
          </el-select>
        </div>
        <div class="click_message"
             @click="clickMessage()">还卡</div>
      </div>
      <!-- 上面是条件查询操作 -->
      <!--下面这个div的样式处理，padding: 0px 30px;height: 566px;max-height: 566px;overflow-y: auto;overflow-x: hidden;-->
      <div> 
        <img :style="loadingImg?'display: block;':'display: none;'"
             src="./img/加载小.png"
             style="margin: 189px 545px;animation: rotate 1.5s linear infinite;">
        <card-list :style="loadingImg?'display: none;':'display: block;'"
                   :cardReturnData="cardReturnData"
                   @loadMore="loadMore"
                   :isLoading="isLoading"
                   :isEmpty="isEmpty"
                   :isInfiniteScrollDisabled="isInfiniteScrollDisabled"
                   :isNoMore="isNoMore">
        </card-list>
      </div>

2、A页面的script部分（被引入的组件页面B）

引入组件页面B，这里我去除了mapState, mapActions操作

import B from './B'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'cardReturnRecord',
  data () {
    return {
      loadingImg: true,
      cardReturnData: [],
      currentPage: 1,
      isNoMore: true,
      isLoading: true,
      isEmpty: false,
      isInfiniteScrollDisabled: true,
      search: { keyWord: '', cardType: 0 },
      pagination: {}
    }
  },
  created () {
    this.l_findCardReturnPage()
  },
  components: { CardList },
  computed: {
  },
  methods: {
  // 条件查询时处理
    searchEvent () {
      this.loadingImg = true
      this.cardReturnData = []
      this.currentPage = 1
      this.isLoading = true
      this.isEmpty = false
      this.l_findCardReturnPage()
    },
   // 归还卡成功刷新页面
    refreshEvent () {
      this.loadingImg = true
      this.cardReturnData = []
      this.currentPage = 1
      this.isLoading = true
      this.isEmpty = false
      this.search.keyWord = ''
      this.search.cardType = 0
      this.l_findCardReturnPage()
    },
    // 组件触发
    async loadMore () {
      if (!this.isNoMore) {
        console.log('=================')
        this.currentPage++
        await this.l_findCardReturnPage()
      }
    },
    l_findCardReturnPage () {
      this.isInfiniteScrollDisabled = true
      const param = {
        filter: this.l_generateSearchFilter(),
        pagination: { size: 6, page: this.currentPage, sort: { updateTime: -1 }, totalElements: 0 },
        populate: 'agreedRecord'
      }
      this.请求方法(param).then(
        (res) => {
          if (res) {
            this.loadingImg = false
            console.log('这是什么结果===', res)
            this.pagination = res.pagination
            if (this.pagination.isLastPage) {
              this.isNoMore = true
              this.isLoading = false
            } else {
              this.isNoMore = false
            }
            console.log('this.currentPage-========>', this.currentPage)
            if (this.currentPage > 1) {
              let list = res.results
              console.log('list===>', list)
              // 这里的处理是合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组
              this.cardReturnData = this.cardReturnData.concat(list)
            } else {
              this.cardReturnData = res.results
            }
            this.isInfiniteScrollDisabled = false
            this.isEmpty = !(Object.keys(this.cardReturnData).length > 0)
          }
        })
    },
    l_generateSearchFilter () {
      // 查询条件操作
    }
  }
}

二、这里是被引入的页面B，InfiniteScroll组件

1、B页面的html部分

  <div class="cardList"
       v-infinite-scroll="loadMore"
       infinite-scroll-distance="0"
       :infinite-scroll-disabled="isInfiniteScrollDisabled">
    <div v-if="!isEmpty">
      <div style="height: 102px;"
           v-for="(value, key, index) in cardReturnData" :key="index">
           cardReturnData数据处理
      </div>
    </div>
		<!-- 我们来分割一下。哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈，下面是各种加载样式 -->
     <div style="font-size: 14px; text-align: center; color: #8D90B1; margin: 22px auto 16px;"
         v-if="isLoading"><img src="./img/加载.png"
           style="animation: rotate 1.5s linear infinite;display: inline-block;margin-right:8px">
     <div class="load-style">正在加载</div>
    </div>
    <div class="no-more"
         v-if="isNoMore && Object.keys(cardReturnData).length">没有更多了</div>
    <div class="noData"
         v-show="isEmpty">
      <div style="width: 190px;margin: 99px auto 20px;">
        <img :src="require('./img/wushuju.svg')">
      </div>
      <div class="noDataText">暂无卡片信息</div>
    </div>
  </div>

2、B页面的script部分

export default {
  name: 'cardList',
  props: {
    cardReturnData: {
      type: Array,
      default: () => []
    },
    isNoMore: {
      type: Boolean,
      default: true
    },
    isLoading: {
      type: Boolean,
      default: true
    },
    isEmpty: {
      type: Boolean,
      default: false
    },
    isInfiniteScrollDisabled: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      dialogShow: false,
      dialogData: []
    }
  },
  methods: {
    async loadMore () {
      this.$emit('loadMore')
    }
     // 丢失操作
    lostCard () {
    // 操作成功后调用父级的方法刷新
       this.$parent.refreshEvent()
    },
  }
}

2、B页面的style部分（这里有个重点）

这里只需要width，要是加上height会无限触发数据加载，知道数据加载完

.cardList {
  width: 100%;
}

那么我们就完成了InfiniteScroll组件呦，是不是很简单。哈哈哈哈哈哈哈哈哈，其实我也是自己记录一下代码。