如何实现一个无限滚动列表，并分页加载？

Question

列表中的数据是变化的，所以在实现无限滚动的同时，也要请求新的数据，这样的无限滚动怎么实现呢？现在的开发环境是vue3的，从1滚动到最后一个后，再从1开始滚动,自动滚动，不需要滚动条!当数据不足5条的时候不需要滚动

Answer 1

<template>
  <div class="card-list">
    <div class="card-item" v-for="(item, index) in list">
        {{ item }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const rbTimer = ref(null);
const totalList = ref([
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  10,
  11,
  12,
  13,
  14,
  15,
  16,
  17,
  18,
  19,
]);
const list = ref([1, 2, 3, 4, 5]);
const pageSize = 5; // 每页显示的条数
let currentPage = 1; // 当前页码

onMounted(() => {
  const cardList = document.getElementsByClassName("card-list")[0];
  if (totalList.value.length > pageSize) {
    rbTimer.value = scroll(cardList);
  }
});

const scroll = (tableDom) => {
  let isScroll = true;
  tableDom.addEventListener("mouseover", () => {
    isScroll = false;
  });
  tableDom.addEventListener("mouseout", () => {
    isScroll = true;
  });
  return setInterval(() => {
    if (isScroll) {
      tableDom.scrollTop += 3; // 设置滚动速度
      if (
        Math.abs(tableDom.clientHeight + tableDom.scrollTop - tableDom.scrollHeight) <= 2
      ) {
        if (list.value.length === totalList.value.length) {
          tableDom.scrollTop = 0;
        }
        setTimeout(loadNextPage, 500); // 延迟500毫秒加载下一页数据
      }
    }
  }, 100);
};

const loadNextPage = () => {
  if (currentPage * pageSize < totalList.value.length) {
    currentPage++;
    list.value =[...list.value, ...totalList.value.slice(
      (currentPage - 1) * pageSize,
      currentPage * pageSize
    )];
  }
};
</script>

<style>
.card-list {
  height: 100px;
  overflow-y: auto;
  overflow: scroll;
}

.card-list::-webkit-scrollbar{
  width: 0;
  height: 0;
}

.card-item{
  line-height: 40px;
}

.card-item:nth-child(odd) {
  height: 40px;
  background: #20a6ff;
}

.card-item:nth-child(even) {
  height: 40px;
  background:#19daf9;
}
</style>

Answer 2

https://vueuse.org/core/useInfiniteScroll/#useinfinitescroll

这个符合你的要求吗？

Answer 3

用vue-virtual-scroller或者
或者自定义：

<template>
  <div class="scroll-container" ref="scrollContainer">
    <div class="scroll-list" :style="{ transform: `translateX(${scrollOffset}px)` }">
      <div
        v-for="item in displayedItems"
        :key="item.id"
        class="scroll-item"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, watch } from 'vue';

const scrollContainer = ref(null);
const items = ref([]); 
const pageSize = 10;
const currentPage = ref(1);
const isLoading = ref(false);
const scrollOffset = ref(0); // 控制滚动位置
const scrollSpeed = 2; // 滚动速度，单位：像素/帧
const scrollInterval = ref(null);
const minItemsToScroll = 5; // 数据少于多少条不滚动

// 异步请求数据
const fetchData = async (page) => {
  isLoading.value = true;
  return new Promise((resolve) => {
    setTimeout(() => {
      const newData = Array.from({ length: pageSize }, (_, i) => ({
        id: `item-${(page - 1) * pageSize + i + 1}`,
        name: `Item ${ (page - 1) * pageSize + i + 1} - Page ${page}`,
      }));
      resolve(newData);
      isLoading.value = false;
    }, 500); 
  });
};

const displayedItems = computed(() => {
  if (items.value.length < minItemsToScroll) {
    return items.value;
  }
  const cloneCount = 2; 
  const startClone = items.value.slice(0, cloneCount);
  const endClone = items.value.slice(-cloneCount);
  return [...endClone, ...items.value, ...startClone];
});

const startAutoScroll = () => {
  if (items.value.length < minItemsToScroll || scrollInterval.value) {
    return;
  }
  scrollOffset.value = 0; // 初始化滚动位置
  const containerWidth = scrollContainer.value.offsetWidth;
  const listWidth = scrollContainer.value.querySelector('.scroll-list').offsetWidth;

  scrollInterval.value = setInterval(() => {
    scrollOffset.value -= scrollSpeed;
    if (Math.abs(scrollOffset.value) > listWidth - containerWidth) {
      // 滚动到末尾，跳回开头
      scrollOffset.value = 0;
    }
  }, 16); // 16ms 约等于 60帧
};

const stopAutoScroll = () => {
  if (scrollInterval.value) {
    clearInterval(scrollInterval.value);
    scrollInterval.value = null;
  }
};

const loadMoreData = async () => {
  if (isLoading.value) return;
  currentPage.value++;
  const newData = await fetchData(currentPage.value);
  items.value = [...items.value, ...newData];
};

watch(items, (newItems) => {
  if (newItems.length >= minItemsToScroll && !scrollInterval.value) {
    startAutoScroll();
  } else if (newItems.length < minItemsToScroll) {
    stopAutoScroll();
  }
});

onMounted(async () => {
  const initialData = await fetchData(currentPage.value);
  items.value = initialData;
});

onUnmounted(() => {
  stopAutoScroll();
});
</script>

<style scoped>
.scroll-container {
  width: 100%;
  overflow: hidden; /* 隐藏滚动条 */
}

.scroll-list {
  display: flex;
  white-space: nowrap;
  transition: transform 0.3s ease-out; /* 加过渡效果 */
}

.scroll-item {
  flex-shrink: 0;
  padding: 10px;
  border: 1px solid #ccc;
  margin-right: 10px;
}
</style>

Answer 4

可以考虑采用swiper插件
示例代码

<template>
  <swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="50"
    direction="vertical"
    :pagination="true"
    :navigation="true"
    :speed="5000"
    :loop="true"
    :autoplay="{ delay: 0, disableOnInteraction: false,pauseOnMouseEnter: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide v-for="(slide, index) in slides" :key="index">{{ slide }}</swiper-slide>
  </swiper>
</template>

<script>
// 引入必要的组件和样式
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';

// 正确地从 'swiper/modules' 导入需要的 Swiper 模块
import { Pagination, Navigation, Autoplay } from 'swiper/modules';

export default {
  name: 'YourComponentName',
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const slides = ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5'];

    // 将要用到的 Swiper 模块
    const modules = [Pagination, Navigation, Autoplay];

    return {
      slides,
      modules,
      onSwiper(swiper) {
        console.log('Swiper instance:', swiper);
      },
      onSlideChange() {
        console.log('Slide changed');
      }
    };
  }
};
</script>

<style scoped>
/* 在这里添加自定义样式 */
.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

swiper官网地址：https://swiperjs.com/vue?spm=5176.28103460.0.0.7d815d27dNyISH，