vue3.0 实现列表无线滚动Infinite Scroll———elementPlus

一、无限滚动组件指令详情

 1、v-infinite-scroll="handleInfiniteScroll" //handleInfiniteScroll无限滚动加载的方法,获取数据
 2、infinite-scroll-disabled //是否禁用无限滚动加载 默认是false
 3、infinite-scroll-delay //节流时延，单位为ms  默认200
 4、infinite-scroll-distance //触发加载的距离阈值，单位为px
 5、infinite-scroll-immediate //是否立即执行加载方法，以防初始状态下内容无法撑满容器。
 //默认情况下，infinite-scroll-disabled是false，因此如果组件使用无限滚动加载组件，即使在vue不进行加载方法的调用，组件也会调用该方法，因此如果需要控制的话，尽量是使用infinite-scroll-disabled属性来进行加载方法是否调用的控制。

二、注意点
**1.在使用的时候要给外部大盒子加个overflow: auto;**不然会疯狂报错

2.在指令使用的div一定要限定高度（height：xxx; overflow-y:auto）handleInfiniteScroll加载方法将在拉取底部时才会被执行。

三、代码demo演示

<template>
  <div class="fire_warning_root">
    <div class="fire_warn_title">
      <p>预警类型</p>
      <p>上报来源</p>
      <p>日期</p>
      <p>地名</p>
      <p>坐标</p>
      <p>状态</p>
    </div>
    <div class="infinite-list-wrapper" style="overflow: auto">
      <ul
        v-infinite-scroll="handleInfiniteScroll"
        class="list"
        :infinite-scroll-disabled="disabled"
      >
        <li
          v-for="item in count"
          :key="item.id"
          class="list-item"
          @click="handleFirePoint3D(item)"
          :style="{
            background: activeItem.id === item.id ? '#fef0f0' : '',
            color: activeItem.id === item.id ? '#f56c6c' : '',
          }"
        >
          <p>
            {{
              item.fireAlarmType == 1
                ? "巡护事件"
                : item.fireAlarmType == 2
                ? "群众上报"
                : item.fireAlarmType == 3
                ? "云台预警"
                : "卫星预警"
            }}
          </p>
          <p>{{ item.reportingSource }}</p>
          <p>{{ item.reportDate }}</p>
          <p>{{ item.address }}</p>
          <p>{{ item.longitude }}&nbsp;{{ item.latitude }}</p>
          <p>
            {{
              item.state == 0 ? "待处理 " : item.state == 1 ? "已处理" : "其他"
            }}
          </p>
        </li>
      </ul>
      <p v-if="loading">加载中...</p>
      <p v-if="noMore">暂无</p>
    </div>
  </div>
</template>

<script setup name="FireWarning">
import { fireWarningHistorical } from "@/apis/map-fire-warning";

import { computed, ref, reactive, onMounted, toRefs, watch } from "vue";


// 状态管理依赖
import { useStore } from "vuex";


const props = defineProps({
  activeChecked: {
    type: Number,
  },
});

const { activeChecked } = toRefs(props);
const emit = defineEmits(["handleActiveInfo"]);


const count = ref([]);
const loading = ref(false);
const noMore = computed(() => count.value.length >= 9999);
const disabled = computed(() => loading.value || noMore.value);

const activeItem = ref({});
const state = reactive({
  size: 3,
  current: 1,
});
const handleInfiniteScroll= () => {
  loading.value = true;
  setTimeout(() => {
    state.current += 1;
    lookFireWarning();
  }, 2000);
};


/*
 *@description: 查看火情预警
 *@param: {}
 *@return:{}
 */
const lookFireWarning = async () => {
  let para = {
    current: state.current,
    size: state.size,
  };
  const [err, data] = await fireWarningHistorical({
    type: activeChecked.value,
    ...para,
  });
  loading.value = false;

  // 把每一次滚动加载请求的数据push的routeData数组
  let list = data.records;
  for (let i = 0; i < list.length; i++) {
    count.value.push(list[i]);
  }
  loading.value = false;
};

const handleFirePoint3D = (item) => {
  activeItem.value = item;

};

onMounted(() => {
  lookFireWarning();
});
</script>