問題描述

我正在使用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}

附上react-tiga-swiper連結 很好用的輪播元件 https://github.com/xigua1994/react-tiga-swiper