如何在React中用Tailwind CSS实现分页点并跟踪当前图片样式

要实现跟踪当前选中图片并同步分页点样式，需要分三步处理：监听滚动容器的位置、更新当前页码状态、根据状态切换分页点样式。

1. 添加滚动容器的引用与滚动监听 #

首先给滚动容器添加ref，用来获取容器的滚动位置和尺寸，然后监听scrollend事件（适配snap滚动结束后的状态）来更新当前页码。

修改后的完整代码如下：

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

const NUMBER_OF_PAGES = 4;
const [currentPage, setCurrentPage] = useState(1);
// 创建ref引用滚动容器
const scrollContainerRef = useRef(null);

// 处理滚动结束事件的函数
const handleScrollEnd = () => {
  if (!scrollContainerRef.current) return;
  const container = scrollContainerRef.current;
  // 计算当前页码：滚动距离 / 容器宽度，取整后加1（页码从1开始）
  const pageNumber = Math.round(container.scrollLeft / container.clientWidth) + 1;
  setCurrentPage(pageNumber);
};

// 挂载时添加监听，卸载时移除
useEffect(() => {
  const container = scrollContainerRef.current;
  if (!container) return;
  
  container.addEventListener('scrollend', handleScrollEnd);
  return () => {
    container.removeEventListener('scrollend', handleScrollEnd);
  };
}, []);

return (
  <>
    {/* 给滚动容器添加ref */}
    <div 
      ref={scrollContainerRef}
      className="flex flex-row overflow-scroll no-scrollbar snap-x snap-mandatory"
    >
      <img src={screen1} alt="Playstore image1" className='flex-none w-[100%] h-[100%] object-contain rounded-sm snap-center snap-always'/>
      <img src={screen2} alt="Playstore image2" className='flex-none w-[100%] h-[100%] object-contain rounded-sm snap-center snap-always'/>
      <img src={screen3} alt="Playstore image3" className='flex-none w-[100%] h-[100%] object-contain rounded-sm snap-center snap-always'/>
      <img src={screen4} alt="Playstore image4" className='flex-none w-[100%] h-[100%] object-contain rounded-sm snap-center snap-always'/>
    </div>

    {/* 分页点容器用flex布局实现横向排列 */}
    <div className="flex justify-center mt-4">
      {Array.from({ length: NUMBER_OF_PAGES }, (_, i) => i + 1).map(item => (
        <div 
          key={item} // 必须添加key属性，符合React列表渲染规范
          className={`w-5 h-5 rounded-full shadow-md mx-2 ${
            item === currentPage ? 'bg-blue-500' : 'bg-slate-600'
          }`}
        />
      ))}
    </div>
  </>
);

2. 关键细节说明 #

• scrollend事件：相比scroll事件，scrollend会在滚动完全停止后触发，更适配snap滚动的场景，避免滚动过程中频繁更新页码。
• 页码计算逻辑：每张图片宽度为容器的100%，scrollLeft（滚动的水平距离）除以容器的clientWidth（可视宽度），得到滚动过的页面数，取整后加1得到从1开始的页码。
• 分页点样式切换：通过模板字符串判断当前item是否等于currentPage，给选中的分页点设置差异化样式（示例中用bg-blue-500表示选中状态，可根据需求自定义）。
• ref的作用：通过useRef获取DOM元素，确保能准确读取容器的滚动数据。

3. 可选优化：点击分页点切换图片 #

如果需要支持点击分页点直接跳转到对应图片，可以给分页点添加点击事件：

const scrollToPage = (pageNumber) => {
  if (!scrollContainerRef.current) return;
  const container = scrollContainerRef.current;
  // 计算目标滚动位置：(页码-1)*容器宽度
  container.scrollTo({
    left: (pageNumber - 1) * container.clientWidth,
    behavior: 'smooth' // 开启平滑滚动效果，可选
  });
};

// 在分页点的div上添加onClick事件
<div 
  key={item}
  onClick={() => scrollToPage(item)}
  className={`w-5 h-5 rounded-full shadow-md mx-2 cursor-pointer ${
    item === currentPage ? 'bg-blue-500' : 'bg-slate-600'
  }`}
/>

内容的提问来源于stack exchange，提问作者AnyamBorogass