如何使用antd react-tiga-swiper和antd Image.PreviewGroup 结合

问题描述

我正在使用React, react-tiga-swiper做轮播（此处也可替换为其他的轮播组件，解决方案同理），antd的 Image.PreviewGroup做预览。我正在尝试创建一个包含卡片列表的页面。在每张卡片中，都有一个图像轮播。我希望当用户单击图像时，预览会打开，他们可以滑动（或单击箭头）以将所有图像视为大的全屏预览。

代码如下：

import Swiper, {SwipeRef} from 'react-tiga-swiper';
import 'react-tiga-swiper/dist/index.css';


<Image.PreviewGroup>
     <Swiper
          autoPlay={false}
          style={{height: '120px', width: '484px'}}
          selectedIndex={0}
          showIndicators={true}
          indicator={null}
          showDots={false}
          // loop={false}
      >
          {
              (imgs || []).map(img => {
                  return <div key={img.accName}>
                      <Image  width={80} height={80} src={decodeURIComponent(img.downloadUrl)} />
                  </div>
              })
          }
      </Swiper>
  </Image.PreviewGroup>

但是这里发生的情况是，当打开预览时，不是显示 5 张图像，而是显示 11 张（图像显示两次，其中一张图像显示 3 次）。
如果我将<Image.PreviewGroup>放在中，那么我没有图像轮播，而是将多个图像堆叠在一起。

我怎样才能让它显示一个可点击的轮播，点击它时会打开一个全屏预览，其中包含正确数量的图像，可以通过滑动/点击箭头看到？

解决

如果检查页面，我们会发现在轮播包装标签内，它会为我们在代码中声明的每个生成 2-3 张图像。所以自动地，包裹轮播组件的Image.PreviewGroup 会检测到比它应该有的更多的

那么我们可以给 Swiper组件 添加 loop={false} 就ok了，其他的轮播组件也同理，禁用掉循环就可以了。

附上react-tiga-swiper链接 很好用的轮播组件 https://www.npmjs.com/package/react-tiga-swiper