ランダムに作成された無限スクロールin reaction

16453 ワード
テキストリンク

Infinite scroll


Start


スクロールするときに出てくるのは一つの項目よりもっときれいだと思います.
無限スクロールを急ぐ.

Plan


作成する前に、理解する必要があるのは
  • 全div転がり高さ
  • 可視高さ
  • 現在位置
    • この3つを知っておく必要があります.
  • にスクロールすると、位置
    • がチェックされる.
  • 現在位置-完全divスクロール高さ==可視div高さ
  • データ
    • を追加

    Code


    次のコードは、サーバと通信する前のコードです.
      const handleScroll = (e) => {
    console.log(e.currentTarget.scrollHeight, '스크롤높이');
    console.log(e.currentTarget.clientHeight, '클라이언트높이');
    console.log(e.currentTarget.scrollTop, '스크롤탑');

    const { scrollTop, clientHeight, scrollHeight } = e.currentTarget;
    if (scrollHeight - scrollTop === clientHeight) {
      setPage((prev) => prev + 1);
      console.log('페이지 업');
    }
  };

  useEffect(() => {
    //여기서 계속 추가를 해줘야함
    const listSliceLength = 9;
    const loadData = async () => {
      //추후 서버와 통신하여 데이터를 가져오는 부분
      setIsLoading(true);
      let remainder = state.ClothesData.slice(listSliceLength);
      let list = state.ClothesData.slice((page - 1) * listSliceLength, page * listSliceLength);
      console.log('데이터 가져오기');
      console.log('나머지', remainder);
      console.log('리스트', list);

      //9개를 뽑기전에 전체 길이가 9 보다 작은 경우
      // 9보다 많은 경우
      if (remainder.length >= 12) {
        setData((prev) => [...prev, ...list]);
      } else {
        list = state.ClothesData.slice(0, state.ClothesData.length);
        setData((prev) => [...prev, ...list]);
      }
      setIsLoading(false);
    };
    loadData();
  }, [page]);
    名前のコードを作成できます
    一時的にsettimeoutを非同期のように設定
      useEffect(() => {
    //여기서 계속 추가를 해줘야함
    const listSliceLength = 9;
    const getData = () => {
      setTimeout(() => {
        let remainder = state.ClothesData.slice(listSliceLength);
        let list = state.ClothesData.slice((page - 1) * listSliceLength, page * listSliceLength);
        console.log('데이터 가져오기');
        console.log('나머지', remainder);
        console.log('리스트', list);

        //9개를 뽑기전에 전체 길이가 9 보다 작은 경우
        // 9보다 많은 경우
        if (remainder.length >= 12) {
          setData((prev) => [...prev, ...list]);
        } else {
          list = state.ClothesData.slice(0, state.ClothesData.length);
          setData((prev) => [...prev, ...list]);
        }
        setIsLoading(false);
      }, 1000);
    };
    const loadData = async () => {
      setIsLoading(true);
      getData();
      // setIsLoading(false);
    };
    loadData();
  }, [page]);

    Result


    [メモ]MSDN:SetErrorMode Function
    基本ソート(メモ)