javascript - 如何在按钮中放大（）（React swiper）？

Question

如何在swiper 的反应版本中使用缩放方法？我只想放大一个按钮并缩小另一个按钮。

在简历中，我想知道如何从其他兄弟组件放大和缩小 Swiper：

const MySwiper = () => {
return (
    <div>
      <button
        onClick={() => {
          // zoom out here ???
        }}
      >
        ZOOM OUT
      </button>
      <button
        onClick={() => {
          // zoom in here ???
        }}
      >
        ZOOM IN
      </button>
      <Swiper
        id="main"
        className="gallery-main"
        tag="section"
        zoom
        wrapperTag="ul"
      >
        {slides}
      </Swiper>
    </div>
  );
}

标签： javascriptreactjsswiperswiperjsreact-swiper

Answer 1

经过很长时间为此寻找解决方案后，我得到了以下信息。您可以按如下方式制作zoom.in()和zoom.out()使用reffor Swiper 组件：

const MySwiper = () => {

const ref = useRef(null) 

return (
    <div>
      <button
        onClick={() => {
          // zoom out here
          ref.current.swiper.zoom.out()
        }}
      >
        ZOOM OUT
      </button>
      <button
        onClick={() => {
          // zoom in here
          ref.current.swiper.zoom.in()
        }}
      >
        ZOOM IN
      </button>
      <Swiper
        ref={ref}
        id="main"
        className="gallery-main"
        tag="section"
        zoom
        wrapperTag="ul"
      >
        {slides}
      </Swiper>
    </div>
  );
}

但是您不能zoom.in像 150% 这样的特定缩放比例，或者像 2 这样的特定比例。您只能放大到 Swiper 的缩放道具上建立的最大比例（默认为 3）或缩小到最小比例（默认为 1 )