vue2中swiper6不能正常使用的解决

第一步安装swiper6 

 第二步在main.js中引入swiper6

注意：也可以在其他地方引入，但是在main.js中引入，所有的组件都能用swiper的样式

样式的引入，不是平常的引入，引入代码如下

注意：一定要这样引入样式

// 在main.js中引入swiper样式，让所有的组件都能用swiper的样式
import 'swiper/swiper.min.css'
import 'swiper/swiper-bundle.min.css' 

引入这两个文件即可

第三步：new Swiper实例

这里用一种笨方法来演示，主要是学习怎样引入

3.1，引入

注意：一定要引入这两个，少引入一个就不行

import  { Swiper, Navigation } from 'swiper'

3.2，结构

        <div class="swiper-container" id="mySwiper">
          <div class="swiper-wrapper">
            <!-- 用v-for动态的生成 -->
            <div class="swiper-slide" v-for="(carousel) in bannerList" :key="carousel.id">
              <img :src="carousel.imgUrl" />
            </div>

          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

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

3.3，实例化swiper

在mounted中设置一个定时器，两秒之后在实例化Swiper对象，解决异步问题

因为在结构加载完成之后，实例化Swiper才能生效

v-for依赖于state的数据，实例化必须在v--for获得数据，渲染完结构之后，才能正常使用swiper

mounted() {
    // 派发action 通过vuex发起ajax请求，将数据存储在仓库中
    this.$store.dispatch('getBannerList')
    // 在new Swiper实例之前，页面中结构必须得有,但是如果在mounted中直接new Swiper 不行
    // 因为里面有v-for,他所依赖的数据，返回完成之后，才能有完整的结构
    // 所以在这里，先用一个定时器凑活这用
    setTimeout(()=> {        
        Swiper.use([Navigation])
      var mySwiper = new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
          clickable:true
        },

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