使用 Ionic-Swipe 使用 Ionic React 的图片库

如何解决使用 Ionic-Swipe 使用 Ionic React 的图片库

我的客户要求使用图库功能。这样我就会有一组图像，在单击每个图像时，我会像一个模态一样显示所有可用的图像。我想用 Ionic Swiper 组件来实现这一点。下面的例子是 Ionic-Angular，我需要 Ionic-React。

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 一起使用的库，请告诉我。

解决方法

<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
• 观看描述代码等内容的视频 - https://youtu.be/mCkrZYIbH10