Một rail danh mục cho cửa hàng của bạn, trong React

Rail danh mục — dải các bộ phận có thể chạm phía trên lưới cửa hàng — là các vùng chứa cuộn có lưu lượng cao nhất trong thương mại điện tử, và chúng là menu, không phải carousel: mỗi ô là một liên kết, không có gì snap, và một nửa ô hé lộ ở cạnh chính là thứ mời gọi người dùng cuộn.

Kéo rail hoặc dùng mũi tên — chúng vô hiệu hóa ở các đầu thật sự của dải.

Chỉnh sửa ví dụ này trực tiếp trong Storybook

Tại sao cuộn gốc thắng thế trên một trang cửa hàng

Rail cửa hàng nằm ở phần trên cùng của trang, nơi bạn tranh giành từng điểm Lighthouse. Một engine carousel cung cấp hàng chục kilobyte mô phỏng cử chỉ để làm điều mà trình duyệt vốn làm sẵn; thư viện này chỉ ≈5.7 kB min+gzip và để việc cuộn cho nền tảng, vì vậy không có hiện tượng giật khi hydrate — rail cuộn được trước khi JavaScript của bạn tải xong, điều đó cũng có nghĩa là nó hoạt động trong HTML được render phía server mà crawler của bạn nhìn thấy. Trang này tự nó là bằng chứng render phía server: demo ở trên vẫn cuộn được khi JavaScript bị tắt.

Trang so sánh có bảng đầy đủ đối chiếu với Swiper, Embla, keen-slider và react-slick.

Theo dõi khả năng hiển thị là một tính năng của trang cửa hàng

Khả năng hiển thị theo từng item nghe như một chi tiết triển khai cho đến khi bạn ánh xạ nó vào việc trưng bày hàng hóa:

Ảnh lazy — render một ô placeholder cho đến khi useIsVisible báo nó đã lên màn hình.
Phân tích impression — getVisible() (hoạt động trực tiếp trong demo hero trên trang chủ) cho bạn biết chính xác danh mục nào đã được xem, không chỉ là rail đã render.
Mũi tên nhận biết cạnh — vô hiệu hóa hoặc ẩn ở các đầu thật sự, kể cả sau khi danh mục tải bất đồng bộ, như trong ví dụ thêm item.

Điều chỉnh nó theo hệ thống thiết kế của bạn

Các ô là component của bạn — thẻ ảnh, hình tròn, pill văn bản — mỗi cái mang một itemId. Chiều cao và chiều rộng đến từ CSS của bạn; menu không áp đặt kích thước nào. Cuộn từng item một như một slider sản phẩm với one-item-scroll, hiển thị một chỉ báo tiến trình cuộn, hoặc triển khai RTL cho cửa hàng tiếng Ả Rập và Do Thái với ví dụ RTL — rail là sự kết hợp, không phải cấu hình.

Mẫu hình, tối giản

Các ô có itemId, mũi tên đến từ các hook hiển thị — toàn bộ rail chưa đến bốn mươi dòng.

CategoryRail.tsx

function CategoryRail({ categories }: { categories: Category[] }) {
  return (
    <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
      {categories.map((category) => (
        <CategoryTile itemId={category.id} key={category.id} {...category} />
      ))}
    </ScrollMenu>
  );
}

function CategoryTile({ itemId, name, image }: CategoryTileProps) {
  // Lazy images for free: placeholders until the tile is on screen.
  const visibility = React.useContext<publicApiType>(VisibilityContext);
  const isVisible = visibility.useIsVisible(itemId, false);
  return (
    <a href={`/category/${itemId}`} className="rail-tile">
      {isVisible ? <img src={image} alt="" /> : <div className="ph" />}
      <span>{name}</span>
    </a>
  );
}

function LeftArrow() {
  const visibility = React.useContext<publicApiType>(VisibilityContext);
  const atStart = visibility.useLeftArrowVisible();
  return (
    <button disabled={atStart} onClick={() => visibility.scrollPrev()}>
      ←
    </button>
  );
}

Hoặc cài đặt nó như một component shadcn

Registry item cơ bản scroll-menu chính là rail này — mũi tên được style theo shadcn, kéo để cuộn, thanh cuộn ẩn — được cài vào components/ui/ của bạn và style theo token của bạn:

shadcn

npx shadcn@latest add https://react-horizontal-scrolling-menu.dev/r/scroll-menu.json

Các ví dụ liên quan

Tất cả 21 ví dụ