slibra-module-web/src/composables/useInfinite.js

import { ref, unref, onMounted, computed } from "vue";
import { chatApi } from '@/api/chat';

export const useInfinite = (path, props) => {

  const pageParams = ref({ pageNum: 1, pageSize: 20 });
  const queryParams = ref(props);

  const recordList = ref([]);
  const isFetching = ref(false);
  const counter = ref(0);
  const noMore = ref(false);

  // let isSwitchStatus = false;

  const isMore = computed(() => pageParams.value.pageNum * pageParams.value.pageSize < counter.value);

  const addHistoryRecord = record => {
    recordList.value.unshift(...record);
  }

  const onScrolltolower = async () => {
    if(unref(isFetching) || unref(noMore) ) return;

    isFetching.value = true;

    const { rows, total } = await initRecordData();
    
    recordList.value.push(...rows);

    counter.value = total;
  
    if (unref(isMore)) {
      pageParams.value.pageNum ++;
    } else {
      noMore.value = true;
    }

    isFetching.value = false;
  }

  const onReset = async () => {
    const { rows, total } = await initRecordData({pageNum:1, pageSize: (pageParams.value.pageNum * pageParams.value.pageSize) + 1});
    recordList.value = rows;
    counter.value = total;

    noMore.value = !unref(isMore)
  }

  // 重置请求
  const onRestore = async (params) => {
    pageParams.value = { pageNum: 1, pageSize: 20 };
    queryParams.value = { ...unref(queryParams), ...params };
      
    const { rows, total } = await initRecordData();

    // isSwitchStatus = true;  
    
    recordList.value = rows;
    counter.value = total;

    // setTimeout(() =>  isSwitchStatus = false, 100);

    noMore.value = !isMore.value;
  }

  const initRecordData = async (params = {}) => {
    const reqParams = {
      ...unref(pageParams),
      ...unref(queryParams),
      ...params
    }
    return await chatApi.getRecordFetch(path, reqParams);
  }

  onMounted(() => onScrolltolower());

  return {
    recordList,
    isFetching,
    onScrolltolower,
    onReset,
    onRestore,
    addHistoryRecord
  }
}