vue项目里swiper的使用方法,配合vant放大预览

安装swiper

npm install swiper@4 vue-awesome-swiper@3 --save-dev

html代码

<swiper
    class="swiper gallery-thumbs"
     :options="swiperOptionThumbs"
     ref="swiperThumbs"
  >
      <swiper-slide v-for="(item, index) in imgurl" :key="index"
        ><van-image
            width="88px"
            height="88px"
            fit="cover"
            @click="handlebigimg(index)"
            :src="item"
      /></swiper-slide>
    </swiper>

js代码

import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import { ImagePreview } from "vant";
 data() {
    return {
      title: "机械详情",
      detailrow: this.$route.query,
      imgurl: [],
      swiperOptionThumbs: {
        loop: false,
        spaceBetween: 30,
        slidesPerView: 4,
        freeMode: true
      }
    };
  },
  components: { swiper, swiperSlide },
  methods:{
  handlebigimg(index) {
      ImagePreview({
        images: this.imgurl,
        startPosition: index
      });
    },}