reactTSX 像抖音或卷轴一样滚动加载新视频

Question

我接下来使用 React 制作 TikTok 克隆

现在我想让它像一个 tiktok 一样，首先会加载 5 个 5，然后如果用户向下滚动到这 5 个视频的底部，则会出现另一个新的 5 个视频并加载骨架，然后重复它，直到到达我的随机数据结束

"use client";
import { useRef } from "react";
import Short from "./Short";
import data from "./reels.json";

// Function to shuffle the array randomly
function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

const ShortContainer: React.FC = () => {
  const shortContainerRef = useRef<HTMLDivElement>(null);

  // Randomize the data array
  const randomizedData = shuffleArray(data);

  // Convert the randomized data to an array of objects
  const randomizedObjects = randomizedData.map((item, index) => ({
    id: `${index + 1}`,
    username: item.username,
    videoUrl: item.videoUrl,
    title: item.title,
    profileUrl: item.profileUrl,
  }));

  return (
    <section ref={shortContainerRef} className="short-container">
      {randomizedObjects.map((short) => (
        <Short
          key={short.id}
          shortContainerRef={shortContainerRef}
          short={short}
        />
      ))}
    </section>
  );
};

export default ShortContainer;

这是我的另一个文件

组件/reels.css

https://pastebin.com/raw/Z92i8sXq

组件/short.tsx

https://pastebin.com/raw/WSrsXgS5

应用程序/page.tsx

https://pastebin.com/raw/EvZ4TG96

reels.json
https://pastebin.com/raw/SXn124u3

仅当用户在每个内容的底部向下滚动时才加载视频

Answer 1

您正在尝试在react/next.js 中加载无限滚动的视频。为此，您可以使用窗口事件监听器。我提供示例代码。

"use client";
import { useCallback, useEffect, useState, useRef } from "react";
import Short from "./Short";
import data from "./reels.json";

// Function to shuffle the array randomly
function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
}

const ShortContainer: React.FC = () => {
    const shortContainerRef = useRef<HTMLDivElement>(null);
    enter [randomizedData, setRandomizedData] = useState<any[]>(); 

    // Convert the randomized data to an array of objects
    const randomizedObjects = randomizedData.map((item, index) => ({
        id: `${index + 1}`,
        username: item.username,
        videoUrl: item.videoUrl,
        title: item.title,
        profileUrl: item.profileUrl,
    }));

    // When scroll down at the bottom, it will get new another random data.
    const handleScroll = useCallback(() => {
        const { scrollHeight, clientHeight } = document.documentElement;
        const scrollTop = window.scrollY;
    
        if (clientHeight + scrollTop == scrollHeight ) {
            // Set randomize the data array
            setRandomizedData({...randomizedData, ...shuffleArray(data)});
        }
    }, [randomizedData]);

    // Add window scroll event when component is mounted as the first.
    useEffect(() => {
        window.addEventListener('scroll', handleScroll);

        return () => {
            window.removeEventListener('scroll', handleScroll)
        }
        // eslint-disable-next-line
    }, []);

    return (
        <section ref={shortContainerRef} className="short-container">
            {randomizedObjects.map((short) => (
                <Short
                    key={short.id}
                    shortContainerRef={shortContainerRef}
                    short={short}
                />
            ))}
        </section>
    );
}

export default ShortContainer;

希望对您有帮助。