用ts简单实现无限滚动的菜单

在TypeScript中实现一个无限滚动的菜单通常涉及到两个关键部分：内容分页和滚动事件处理。这里是一个简单的示例，假设我们有一个数组作为菜单的数据源，并且使用`IntersectionObserver`来进行滚动检测：

import { useEffect, useRef, IntersectionObserver } from 'react';

interface MenuItem {
  id: number;
  title: string;
}

const InfiniteMenu = () => {
  const menuItems = ['item1', 'item2', ...]; // 你的实际数据源
  const menuRef = useRef<HTMLDivElement>(null);
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting && !entry.rootIsVisible) {
        // 当元素进入视口时，加载更多数据
        loadMoreItems();
      }
    });
  });

  useEffect(() => {
    if (menuRef.current) {
      observer.observe(menuRef.current);
      return () => {
        observer.unobserve(menuRef.current);
      };
    }
    return undefined;
  }, [observer]);

  const loadMoreItems = () => {
    // 这里你需要根据实际需求向服务器请求新的数据，并添加到现有列表中
    // 假设新数据为 `newItems`
    menuItems.push(...newItems);
  };

  return (
    <div ref={menuRef}>
      {/* 渲染菜单项 */}
      {menuItems.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
      {/* 添加滚动到底部的占位符，触发加载更多 */}
      {loadMoreIndicator && (
        <div ref={(c) => loadMoreIndicator.current = c} style={{ height: '100px' }} />
      )}
    </div>
  );
};

export default InfiniteMenu;

在这个例子中，我们创建了一个`IntersectionObserver`实例来监听`menuRef`元素的可见性。当用户滚动到菜单底部时（即元素不再在视口中），`loadMoreItems`会被调用来获取并添加更多的菜单项。

注意，这只是一个基础的示例，实际应用可能还需要考虑性能优化、错误处理以及滚动区域的高度动态调整等问题。同时，这只是一个React组件，如果你的项目不是React，那么可能需要相应地调整API和语法。