vue中使用swiper实现缩略图完整版_vue2中使用swiper缩略图控制轮播

作者：2023面试高手 | 2024-04-24 03:27:05

踩

vue2中使用swiper缩略图控制轮播

一、前言

在vue中实现简单的轮播图，我们可以直接使用Element或者Ant等UI框架的走马灯组件，如果需要更复杂的样式，可以利用 Swiper，它提供了各种各样的轮播图效果，例如下方带缩略图的轮播图（轮播图和下方缩略图联动）

二、流程

1、先安装

npm install swiper
#也可指定版本例如^5.4.5
npm install swiper@5.4.5

2、引入swiper

我这边是下载的swiper文件，也可以swiper的CDN
指路swiper官网
（1）在项目中放入官网的swiper.min.css及swiper-bundle.min.js文件
（2）在main.js中或者在html中引入

//main.js
import '@/style/swiper.min.css'
1
2

//index.html
<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="./swiper-bundle.min.css">
</head>
<body>
    ...
    <script src="./swiper.min.js"></script>
    ...
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

（3）在所需页面中引入

import Swiper from ‘swiper’

3、然后就可以写代码啦

（1）添加html内容

<div class="content-right">
        <div class="bannerBox">
          <div class="swiper-container gallery-top">
          //上方轮播图
            <div class="swiper-wrapper">
              <div v-for="(item,index) of proDetails?.photosDetailed" :key="index" class="swiper-slide">
                <img class="img" :src="item">
              </div>
            </div>
          </div>
          <div class="swiper-down">
            <div class="swiper-button-next" />
            <div class="swiper-container gallery-thumbs">
            //下方缩略图
              <div class="swiper-wrapper">
                <div v-for="(item,index) of proDetails?.photosDetailed" :key="index" class="swiper-slide swiper-bottom">
                  <img class="img" :src="item">
                </div>
              </div>
            </div>
            //导航按钮
            <div class="swiper-button-prev" />
          </div>
        </div>
      </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

（2）初始化swiper

 created() {
    this.$nextTick(function() {
    	this.galleryThumbsLunbo()
	    this.galleryTopLunbo()
    })
 },
 methods: {
    galleryTopLunbo() {
      this.galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 0,
        loop: true,
        loopedSlides: 5,
        // 左右按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        thumbs: { // thumbs组件专门用于制作带缩略图的swiper
          swiper: this.galleryThumbs,
          slideThumbActiveClass: 'swiper-slide-thumb-active'
        }
      })
    },
    galleryThumbsLunbo() {
      this.galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 15, // 在slide之间设置距离（单位px）
        slidesPerView: 3, // 设置slider容器能够同时显示的slides数量
        loop: true, // 设置为true 则开启loop模式
        freeMode: true, // 默认为false，普通模式：slide滑动时只滑动一格
        loopedSlides: 7, // 一般设置大于可视slide个数2个即可
        watchSlidesVisibility: true, // 开启watchSlidesVisibility选项前需要先开启watchSlidesProgress
        watchSlidesProgress: true // 开启这个参数来计算每个slide的progress(进度、进程)
      })
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

这边如果使用的是接口返回的数据，容易出现数据不完整及轮播图划不动等情况，这是因为先初始化的swiper，才去调用获取数据的接口，解决方法如下：

methods: {
    productDetails() {
      common.get('/获取数据的接口').then(res => {
        if (res?.code === 1) {
          //获取到数据后在初始化swiper
          this.$nextTick(function() {
            this.galleryThumbsLunbo()
            this.galleryTopLunbo()
          })
       }
     })
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13

三、效果展示

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/477363