[JavaScript知识库]Vue中使用swiper实现轮播图

• 首先使用npm安装swiper 这里使用的是版本5

npm i swiper@5 -S

• 接着在组件模板中添加轮播的html结构

<div class="swiper">
    <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 class="swiper-scrollbar"></div>
</div>

• 如果项目中多处使用轮播，则直接接着在入口文件即main.js中引入swiper样式即可

import 'swiper/css/swiper.css'

• 在使用swiper的组件中引入swiper

import Swiper from 'swiper'

• 这里特别注意的是在实例化swiper对象时，必须在对应的轮播html结构全部渲染完成以后再实例化该对象
• 所以如果轮播的数据是异步请求然后通过vue渲染的话，那么要等待渲染完成再进行swiper对象实例化
• 一般对轮播数据进行监听，当该数据发送变化时说明数据已经获取到，此时再利用this.$nextTick方法传入回调来进行swiper对象实例化，nextTick方法的作用在于当数据发送变化时，该方法传入的回调会在页面的对应dom循环渲染完成后再执行该回调，这样就保证了swiper对象在html结构渲染结束再实例化 如下代码

watch: {
    // 监听bannerList数据的变化 由空数组变为长度为4的数组
    bannerList: {
      handler(newV, oldV) {
        this.$nextTick(() => {
          var mySwiper = new Swiper(".swiper-container", {
          loop: true, // 循环模式选项
          autoplay: true, //自动轮播
          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        })
        })
      },
    },
  }

完成以上步骤即可基本实现vue中的轮播图