vue 项目中 swiper 插件的简单使用及使用中遇到的问题（使用 vue-awesome-swiper）- 轮播图

Fighting_p

已于 2024-01-22 09:35:37 修改

阅读量1.4k

点赞数

分类专栏：项目问题小工具、插件文章标签： vue.js javascript 前端

于 2022-11-15 15:04:19 首次发布

本文链接：https://blog.csdn.net/m0_53562074/article/details/127842247

版权

项目问题同时被 2 个专栏收录

106 篇文章 1 订阅

订阅专栏

小工具、插件

9 篇文章 0 订阅

订阅专栏

1. 下载插件

下载插件命令

// 下载最新版本（我下载最新版本有问题）
npm install vue-awesome-swiper --save
// 下载指定版本（3.1.3）
npm install vue-awesome-swiper@3.1.3 --save
// 下载 vue-awesome-swiper 插件时同时也下载了 swiper 插件，不用我们手动下载 swiper 插件

【注意】下载插件时，会有各种各样的报错（找不到 XXX 文件路径）
- 问题：导入包时，webpack 查找包文件路径找的是下载包目录下对应的 index.js 文件（还是src/index.js?）：
  ①下载最新的 vue-awesome-swiper 包下有这个 index.js 文件，但是该文件中要导入一个 'swiper/vue' ，在 swiper 包里的 vue 目录下又找不到对应的 index.js 文件；
  ②下载 3.1.3 版本的 vue-awesome-swiper 时，该包下又没有 index.js 文件，就会报错找不到 vue-awesome-swiper 下的 index.js
  （这两个报错就很迷惑，不知道什么原因）
- 解决：过了个周末将之前下载的 node_modules 删掉，重新在 淘宝镜像 下载所有的包，没有再出现之前找不到路径的报错（vue-awesome-swiper 下载的 3.1.3 版本）。
- 原因：可能是刚开始下载包时用的镜像是公司的私服地址导致的？但是刚开始也有用淘宝镜像下载包，也会有其他的不知道哪冒出来的文件路径找不到（这里的文件路径找不到对应的包在 package.json 中没有记录）。
- 迷惑：最后下载的 3.1.3 版本的包中包的根目录下没有 index.js 文件为什么又不报错了？所以 webpack 查找包文件路径是找根目录下 index.js 还是根目录下 src/index.js？？？

2. 使用步骤

【备注】此处是在单独封装的组件中使用 swiper 组件，代码中 value 是要展示的图片数组

导入插件、css文件并局部注册组件
使用swiper组件
轮播图 options 配置信息

<!-- 现场照片轮播 -->
<template>
  <div class="imgSwiper">
  	<!-- 【第二步】使用swiper组件 -->
    <Swiper
      v-if="value && value.length"
      ref="swiperRef"
      class="swiper-wrapper"
      :options="swiperOption"
    >
      <swiper-slide v-for="(item, index) in value || []" :key="index">
        <el-image
          :src="sysConfigData.mon_znfx_videopath + item.bkgUrl"
          :preview-src-list="value.map(imgItem => sysConfigData.mon_znfx_videopath + imgItem.bkgUrl)"
        >
        </el-image>
      </swiper-slide>

      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </Swiper>
    <div v-else class="noImg">暂无现场照片</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
/**** 【第一步】导入插件、css文件 并 局部注册组件 ****/
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  name: '',
  components: { // 局部注册组件
    swiper,
    swiperSlide
  },

  props: {
    /**** 父组件传给子组件（当前组件）的图片数组 ****/
    value: {
      type: Array,
      defult: []
    }
  },

  data() {
    return {
      /**** 【第三步】：【轮播图配置信息】 ****/
      swiperOption: {
        loop: false, // 是否循环轮播
        autoplay: true, // 是否可以自动轮播
        // delay: 1000, // 1秒切换一次（我加了但是好像没有用，就又去掉了）
        slidesPerView: 5, // 可视区域内可展示多少个块
        spaceBetween: 15, // 块之间间隔距离
        initialSlide: 0, // 默认初始显示块
        centeredSlides: true, // 当前 active slide 居中
        slideToClickedSlide: true, // 点击的 slide 会居中
        freeMode: false,
        // 显示分页（当前页面展示的图片有时会很多，暂时不要分页的小圆点）
        // pagination: {
        //   el: '.swiper-pagination',
        //   clickable: true
        // },
        // 设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },

  computed: {
    ...mapGetters(['sysConfigData']),
    /**** 【取当前 active 的 slide 的 index】 ****/
    activeIndex() {
      return this.$refs && this.$refs.swiperRef && this.$refs.swiperRef.swiper.activeIndex
    },
  },
  watch: {},
  created() {},
  methods: {}
}
</script>

<style lang='scss' scoped>
.imgSwiper {
  height: 100px;
  display: flex;
  justify-content: center;

  margin: 20px;

  ::v-deep .swiper-wrapper {
    width: 100%;
    height: 100%;

    .swiper-slide {
      img,
      .el-image {
        width: 100%;
        height: 100%;
      }
    }

    .swiper-slide-active {
      border: 2px solid #00a4ff;
    }

    .swiper-pagination {
      bottom: 0;
    }

    .swiper-button-next,
    .swiper-button-prev {
      height: 20px;
      top: 60%;
    }
  }
}
</style>

swiper插件API文档：https://www.swiper.com.cn/api/index.html

以上代码为局部注册 swiper 组件，也可全局注册

// 在 main.js 文件中（一定记得 css 文件也要引入，不然页面中使用轮播布局会乱 - 详见犯过的错3.2）
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'	
Vue.component('Swiper', swiper)
Vue.component('SwiperSlide', swiperSlide)