vue中使用 swiper ，问题汇总，踩坑官方文档 swiper中文网(总入口) vue-awesome-swiper

官方文档

版本注意

vue-awesome-swiper 3.1.3对应swiper4.x // 这个版本比较稳定
vue-awesome-swiper 4.1.4对应swiper5-6

vue-awesome-swiper 4.1.4 网传有bug （vue-awesome-swiper v4.1.1版 autoplay、effect等无效问题至今未解决），推荐使用 3.1.3 的

安装使用

::: details

第一步，安装
npm i swiper@4.5.0
npm i vue-awesome-swiper@3.1.3
备注：以上是基本使用步骤，不同的版本号对应着不同的使用方法，而且连引入方法都不同，这是最坑爹的

第二部，全局引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

/ 局部引入
import 'swiper/dist/css/swiper.css'
// 注意下边引入的swiper和swiperSlide第一个字母s都是小写的，大写会报错
import { swiper, swiperSlide } from 'vue-awesome-swiper'

第三步，使用
<template>
  <swiper ref="mySwiper" class="swiper" :options="options" >
    <swiper-slide>1</swiper-slide>
    <swiper-slide>2</swiper-slide>
    <swiper-slide>3</swiper-slide>
      <!-- 分页器，注意一定要加slot -->
    <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> 
      <!--滚动条-->
    <div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
<script>
export default {
  data() {
    return {
      //配置项例子
      options: {
        loop: true,
        autoplay: {
          //swiper手动滑动之后自动轮播失效的解决方法,包括触碰，拖动，点击pagination,重新启动自动播放
          disableOnInteraction: false,
          // 自动播放时间：毫秒
          delay: 2000,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          // bulletClass: "my-bullet",
        },
      },
    };
  },
};

:::

常用配置详解

::: details

options:{
    direction: 'vertical', // 可设置水平(horizontal)或垂直(vertical)。
    loop: true, // 循环吗
    speed: 800, // 滑动时候动画的速度
    autoplay: {
      delay: 5000, // 等5秒下一个
      disableOnInteraction: false // 中间滑动一下，取消自动吗？
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    }, 
    // 其他配置
    // spaceBetween: 15, // 轮播图片之间的间距
    // centeredSlides: true, // 居中还是从图1开始
    // slidesPerView: 'auto', // 一屏幕显示几个? 数字或者默认  auto 自动。
    // notNextTick: true, // true:加载后允许触发事件 false:加载后不可以触发事件
    // initialSlide: 0, // 从第几个开始
    // paginationClickable: true, // 下面按钮让点吗
    // navigation: {
    //   prevEl: '.swiper-button-prev', // 左侧按钮
    //   nextEl: '.swiper-button-next' // 右侧按钮
    // },
    // effect: 'fade', // 渐入效果
    // watchSlidesProgress: true, // 开启这个参数来计算每个slide的progress
    // watchSlidesVisibility: true  // 先要开启watchSlidesProgress参数，如果开启watchSlidesVisibility，则会在每个slide增加一个指示该slide的progress值得classname
    // autoHeight: true  // 图片高度自适应
}

:::

注意事项 / 问题记录

autoplay 不生效（待完善）

自动轮播到最后一张图的时候，就停止轮播了，不能重复轮播。

点击折叠/展开

options: {
  // autoplay: true,
  loop: true,
  direction: "vertical",
  slidesPerView: 8,
  loopedSlides: 4,
  loopFillGroupWithBlank: true,
  //
  autoplay: {
    stopOnLastSlide: false,
    //swiper手动滑动之后自动轮播失效的解决方法,包括触碰，拖动，点击pagination,重新启动自动播放
    disableOnInteraction: false,
    // 自动播放时间：毫秒
    delay: 1000
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true
    // bulletClass: "my-bullet",
  }
},

slidesPerView 不生效

可能是 flex 布局导致 // 尝试给 swiper 容器一个具体的高度
可能是 swiper容器高度太小，以及 spaceBetween 太大了。 // 尝试增大 swiper 容器的高度或 spaceBetween设置为 0

纯文字轮播，文字重叠

可能你加入了如下属性

  effect: 'fade', // 渐入效果

鼠标移入停止轮播，鼠标移出继续轮播

点击折叠/展开

<!--  -->
<template>
<div class="swiperTpl" @mouseenter="onMouseEnter('mySwiper')" @mouseleave="onMouseLeave('mySwiper')">
  <swiper ref="mySwiper" class="swiper" :options="options3">
    <swiper-slide v-for="(item, i) in newsList" :key="i">
      <div class="slideItem">{{ item.title }}</div>
    </swiper-slide>
    <!--  分页器，注意一定要加slot -->
    <!-- <div class="swiper-pagination" slot="pagination"></div> -->
  </swiper>
</div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
// 注意下边引入的swiper和swiperSlide第一个字母s都是小写的，大写会报错
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
  swiper, swiperSlide
},
data() {
  return {
    newsList: [
      { title: '11长沙开始下暴雪，暴雪天气预警', id: 1 },
      { title: '11长沙开始下暴雪，暴雪天气预警', id: 1 },
      { title: '22长沙开始下暴雪，暴雪天气预警', id: 1 },
      { title: '22长沙开始下暴雪，暴雪天气预警', id: 1 },
      { title: '33长沙开始下暴雪，暴雪天气预警', id: 1 },
      { title: '33长沙开始下暴雪，暴雪天气预警', id: 1 },
      { title: '44长沙开始下暴雪，暴雪天气预警', id: 1 },
      { title: '44长沙开始下暴雪，暴雪天气预警', id: 1 },
      { title: '55长沙开始下暴雪，暴雪天气预警', id: 1 },
      { title: '55长沙开始下暴雪，暴雪天气预警', id: 1 },
      { title: '11长沙开始下暴雪，暴雪天气预警', id: 1 }
    ],
    Image: 11,
    // swiper 配置1
    options: {
      // autoplay: true,
      loop: true,
      direction: 'vertical',
      slidesPerView: 8,
      loopedSlides: 4,
      loopFillGroupWithBlank: true,
      //
      autoplay: {
        stopOnLastSlide: false,
        // swiper手动滑动之后自动轮播失效的解决方法,包括触碰，拖动，点击pagination,重新启动自动播放
        disableOnInteraction: false,
        // 自动播放时间：毫秒
        delay: 1000
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true
        // bulletClass: "my-bullet",
      }
    },
    // swiper 配置2
    options2: {
      direction: 'vertical',
      spaceBetween: 15, // 图片之间的间距
      centeredSlides: true, // 居中还是从图1开始
      slidesPerView: 'auto', // 一屏幕显示几个? 数字或者默认  auto 自动。
      notNextTick: true, // true:加载后允许触发事件 false:加载后不可以触发事件
      loop: true, // 循环吗
      // initialSlide: 0, // 从第几个开始
      autoplay: {
        delay: 500, // 等5秒下一个
        disableOnInteraction: false // 中间滑动一下，取消自动吗？
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      }, // 下按钮
      speed: 800, // 滑动时候动画的速度
      paginationClickable: true, // 下面按钮让点吗
      navigation: {
        prevEl: '.swiper-button-prev', // 左侧按钮
        nextEl: '.swiper-button-next' // 右侧按钮
      },
      // effect: "fade", // 渐入效果
      watchSlidesProgress: true, // 开启这个参数来计算每个slide的progress
      watchSlidesVisibility: true,
      on: {
        mouseenter: function() {
          console.log(1111)
          this.autoplay.stop() // 鼠标放上去时停止轮播
        },
        mouseleave: function() {
          console.log(222)
          this.autoplay.start() // 鼠标移出时继续轮播
        }
      }
    },
    // 配置3
    options3: {
      loop: true, // 循环
      notNextTick: true,
      slidesPerView: 6, // slide可见数量
      spaceBetween: 0, // slide之间的距离（单位px）
      direction: 'vertical',
      speed: 1000, // 滚动速度
      setWrapperSize: true,
      freeMode: true, // true则是自由模式，不会自动贴合滑动位置
      autoplay: {
        delay: 300, // 自动切换的时间间隔，单位ms
        stopOnLastSlide: false, // 当切换到最后一个slide时停止自动切换
        disableOnInteraction: false // 用户操作swiper之后，是否禁止autoplay
        // reverseDirection: false, //开启反向自动轮播
        // waitForTransition: true, //等待过渡完毕。自动切换会在slide过渡完毕后才开始计时
      },
      observer: true, // 修改swiper自己或子元素时，自动初始化swiper
      observeParents: true // 修改swiper的父元素时，自动初始化swiper
    }
  }
},
methods: {
  onMouseEnter(ref) {
    const ele = this.$refs.mySwiper.swiper
    ele.autoplay.stop()
  },
  /** 鼠标移出 */
  onMouseLeave(ref) {
    const ele = this.$refs.mySwiper.swiper
    ele.autoplay.start()
  }
}
}
</script>

<style lang="scss" scoped>
.swiperTpl {
height: 100%;
// height: 150px !important;
.swiper {
  height: 100%;
}
}
</style>

链接

vue2详细使用Swiper，看完就懂少踩坑