使用Ionic-Swipe的Ionic React图片库

Question

我的客户要求提供一个图片库功能。这样我就会有一个图像数组，在单击每个图像时，我会得到一个模式，逐个显示所有可用的图像。我想用离子刮水器组件来实现这一点。下面的例子是离子角度，我需要离子反应。

https://www.youtube.com/watch?v=BGoL0uWRTrY

有没有办法将图片作为图库打开，并具有缩放、上一次和下一次滑动功能？

<div className="mt-2">
              <IonSlides ref={slideRef} options={slideOpts}>
                {bridImages.map((image, idx) => (
                  <IonSlide key={idx} className="img-container">
                    <img
                      src={image.url}
                      alt={image.alt}
                    />
                  </IonSlide>
                ))}
              </IonSlides>
            </div>

或者如果有任何其他的库是移动友好的，也可以使用Ionic-React，请告诉我。

Answer 1

<IonSlides
  options={slideOpts}
  ref={mySlides}
  onIonSlideDidChange={handleSlideChange}
>

列表，并获取包含activeIndex的swiper对象

const handleSlideChange = async () => {
  const swiper = await mySlides.current.getSwiper();
  console.log("Slide Index", swiper.activeIndex);
  // setDisablePrevBtn(swiper.isBeginning);
  // setDisableNextBtn(swiper.isEnd);
};

请参阅工作项目-描述代码及更多内容的https://codesandbox.io/s/ionic-react-slides-jq57g

• See视频- https://youtu.be/mCkrZYIbH10