vue中使用swiper

1.npm install swiper

2.在使用页面引入swiper
import Swiper from "swiper"
import "swiper/dist/css/swiper.css"

3.html页面
//小图片的位置（点击小图片会出现swiper）

<ul>

  <li v-for="(obj, index) in JSON.parse(item.img)" :key="index">
    <img :src=obj alt="没网了" @click="handleView(JSON.parse(item.img), index)">
  </li>
</ul>
//swiper的位置

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide" v-for="(obj, index) in imgUrl" :key="index">
      <div class="swiper-zoom-container">   //缩放
      <img :src='obj' v-if="visible" style="width: 100%">
      </div>
    </div>
  </div>
  <div class="swiper-pagination"></div>     //分页器
</div>

4.创建一个swiper
//点击事件内创建swiper

handleView(item, index) {
  console.log(item);
  this.imgUrl = item;
  console.log(this.imgUrl);
  this.visible = true;
  this.swiper = new Swiper ('.swiper-container', {
    mode: 'horizontal', //水平轮播
    paginationClickable :true,
    pagination: {
      el: '.swiper-pagination',
    },
    initialSlide: index, //默认显示当前index索引位置的图片
    loop: false,

    zoom: {
      maxRatio: 5, //最大缩放倍率
      minRatio: 2, //最小缩放倍率
      toggle: true //允许双击缩放
    },
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, //修改swiper的父元素时，自动初始化swiper
    touchMoveStopPropagation: true, //阻止touchmove冒泡事件

  })
},