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

最新推荐文章于 2022-12-01 17:59:21 发布

生气不如去争气

最新推荐文章于 2022-12-01 17:59:21 发布

阅读量665

点赞数

分类专栏： vue 文章标签： vue js html

本文链接：https://blog.youkuaiyun.com/qq_34684704/article/details/118301971

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Swiper组件实现图片轮播效果，包括安装配置、基本用法及自定义样式等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装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
      });
    },}