Vue cli3 使用 Swiper轮播

效果：

---

1、进入swiper中文网下载引用文件

swiper中文网 下载地址

2、引入文件

app.vue 引入样式

@import url("./assets/css/swiper.min.css");

main.vue 需要使用轮播的组件（不能全局...没搞懂）引入js

import Swiper from '@/assets/js/swiper.min.js'

3、添加 HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

4、初始化一个轮播

/**初始化轮播图 */
var mySwiper = new Swiper('.swiper-container', {
  loop: true, // 循环模式选项
  speed: 500, //切换时长
  // grabCursor: true, //设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。
  autoplay: {
    delay: 3000,   //自动切换延时
    stopOnLastSlide: false, //如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。
    disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay。默认为true：停止。
  },
  keyboard: true,  //键盘切换

  // 如果需要分页器
  pagination: {
    el: '.swiper-pagination',
    clickable: true,  //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
  },

  // 如果需要前进后退按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

5、修改一些样式

<style scoped>
    .swiper-container {
      width: 100%;
      height: 450px;
      /* background: #3399ff; */
      box-sizing: border-box;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 30px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    }

    .swiper-container {
      --swiper-theme-color: #f00; /* 设置Swiper风格 */
      --swiper-pagination-color: #f00; /* 分页器颜色 */
      --swiper-navigation-color: #f00; /* 单独设置按钮颜色 */
      --swiper-navigation-size: 40px; /* 设置按钮大小 */
    }
</style>

<style>
    span.swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      outline: none;
      margin: 0 6px !important;
    }
</style>

关于解决无法使用v-for渲染的问题

需要在请求数据完成后再初始化轮播组件：

//请求数据
Query() {
  this.axios.get('http://*******')
    .then((res) => {
      // console.log(res);
      this.newsData = res.data.data;
      
      /*请求完成后再执行初始化*/
      this.$nextTick(() => {
        this.InitSwiper();  //初始化轮播组件的方法
      })
    }).catch((err) => {
      console.log(err, 'error')
    })
},