swiper4.5.1移动端图片缩放失效的解决方案

本文将解决Swiper4.5.1在移动端图片缩放功能失效的问题。

问题描述:

使用Swiper4.5.1实现移动端图片轮播，并启用缩放功能（zoom: true），但手指缩放图片无效。

代码示例:

<template>
  <div class="image-preview">
    <div class="swiper-container" ref="myswiper">
      <div class="swiper-wrapper">
        <div v-for="(item, index) in imagelist" :key="index" class="swiper-slide">
          <div class="swiper-zoom-container">
            <img src="https://img.php.cn/" alt="Swiper4.5.1移动端图片缩放无效：如何解决手指缩放失效问题？" />
          </div>
        </div>
      </div>
      <div class="swiper-pagination swiper-pagination-customer" slot="pagination" style="text-align:left"></div>
    </div>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";

export default {
  name: "imagepreview",
  props: {
    imagelist: {
      type: Array,
      default: () => [],
    },
    imageslide: {
      type: Number,
      default: 0,
    },
  },
  mounted() {
    const myswiper = new Swiper(".swiper-container", {
      width: window.innerWidth,
      zoom: true,
      initialSlide: this.imageslide,
      pagination: {
        type: "fraction",
        el: ".swiper-pagination",
        clickable: true, 
        currentClass: "swiper-pagination-current-cutomer",
        totalClass: "swiper-pagination-total-customer",
      },
      on: {
        click: () => {
          this.exitimgpreview();
        },
      },
    });
  },
};
</script>

问题原因分析:

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

Swiper的滑动事件（slidePrev，slideNext）与缩放手势冲突，导致缩放手势被中断。

解决方案:

禁用Swiper的自动轮播功能，允许手动缩放操作。在Swiper配置中设置autoplay: false。

修改后的代码:

const mySwiper = new Swiper(".swiper-container", {
  width: window.innerWidth,
  zoom: true,
  initialSlide: this.imageSlide,
  autoplay: false, // 关闭自动轮播
  pagination: {
    type: "fraction",
    el: ".swiper-pagination",
    clickable: true, 
    currentClass: "swiper-pagination-current-cutomer",
    totalClass: "swiper-pagination-total-customer",
  },
  on: {
    click: () => {
      this.exitImgPreview();
    },
  },
});

通过以上修改，即可解决Swiper4.5.1移动端图片缩放失效的问题。 确保你的Swiper版本正确，并且引入了必要的CSS文件。 如果问题仍然存在，请检查其他可能影响缩放的CSS样式或JavaScript代码。