javascript 如何在framework7中添加无限滚动事件

5lhxktic  于 2023-02-11  发布在  Java
关注(0)|答案(1)|浏览(128)

我正在使用Reactjs版本,而不是在Page上使用无穷大,我在div上使用它,不知道如何添加滚动事件。
我知道这是一个有用的超链接,但我不会使用它。

<div className="height-100 overflowY-scroll infinite-scroll-content">

...
</div>
neskvpey

neskvpey1#

给你使用onInfinite事件
loadData函数获取数据并使用新项更新状态。onInfinite函数在用户滚动到页面底部时触发,它更新页码并调用loadData以加载更多数据。loading状态用于防止同时发出多个请求。

import React, { useState, useEffect } from 'react';
import InfiniteScroll from 'framework7/components/infinite-scroll'

const MyComponent = () => {
  const [page, setPage] = useState(1);
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    loadData();
  }, []);

  const loadData = async () => {
    setLoading(true);
    // fetch data here and update items
    setItems([...items, ...newItems]);
    setLoading(false);
  };

  const onInfinite = async () => {
    if (loading) return;
    setPage(page + 1);
    loadData();
  };

  return (
    <div className="height-100 overflowY-scroll infinite-scroll-content">
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
      {loading && <div className="infinite-scroll-preloader">Loading...</div>}
      <Framework7App.InfiniteScroll onInfinite={onInfinite} />
    </div>
  );
};

export default MyComponent;

您可以通过修改<div className="infinite-scroll-preloader">Loading...</div>元素来定制预加载器文本。

相关问题