Swiper滑块网格展示顺序错误求助（React 18+Swiper 10）

你的问题出在Grid模块的填充逻辑配置上：当前设置grid.fill: 'row'结合slidesPerView:1、rows:2时，Swiper会按列优先的规则填充滑块——先填满第一列的所有行，再处理下一列，这就导致了条目顺序错乱。

要实现每页上下排列2个条目、按1→2→3→4→5的顺序分页展示，只需调整Grid的fill属性：

• 将grid.fill的值改为'column'
• 保留rows:2和slidesPerView:1的配置（每页对应1列2行，刚好容纳2个条目）

修改后的完整代码：

<Swiper
  ref={swiperRef}
  spaceBetween={0}
  allowTouchMove={true}
  touchMove={true}
  slidesPerView={1}
  grid={{
    fill: 'column',
    rows: 2,
  }}
  pagination={{
    type: 'fraction'
  }}
  className="mySwiper"
  modules={[Grid, Pagination]}
  onInit={(swiper) => {
    setPagination(swiper?.pagination?.el?.outerText)
  }}
  onSlideChange={onChangeSlider}
>
  {results?.map((item, index) => (
    <SwiperSlide key={index}>
      <div className="bg-[#e2e2e2] py-4 my-2 text-[#010101]">{index + 1}</div>
    </SwiperSlide>
  ))}
</Swiper>

调整后，Swiper会按行优先的逻辑填充每页内容：第一页显示1、2，第二页3、4，第三页显示5，完全匹配你的预期效果。

补充说明：如果移除grid.fill，Swiper默认会用'column'填充，但此时slidesPerView:1会让所有滑块排成一列连续展示，不会触发分页，因此需要显式配置fill: 'column'来保证分页逻辑正常工作。

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