解决在vue2上使用swiper6出现的问题（自动播放，前进后退按钮，分页器）完整版

1、下载swiper6版本的swiper

2、引入swiper的样式

3、轮播图的内容

4、引入组件

5、使用watch和this.$nextTick

5.1、这两个的作用：

5.2、使用方法：

6、解决各种不起作用的情况

6.1、解决没有分页器

6.2、解决不自动播放

6.3、解决点击前进后退按钮不起作用

1、下载swiper6版本的swiper

npm i swiper@6

2、引入swiper的样式

建议直接在main.js中引入，这样只引入一次即可。

import 'swiper/swiper.min.css'

import 'swiper/swiper-bundle.min.css'

3、轮播图的内容

其中v-for里面的名字，可以自定义选择推荐使用 carousel

        <!--banner轮播-->
        <div class="swiper-container" id="mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in bannerList" :key="item.id">
              <img :src=item.imgUrl />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination" slot="pagination"></div>

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

4、引入组件

这一步是关键，一定要注意！！！

4.1、引入

import { Swiper, Navigation, Pagination, Autoplay } from 'swiper'

4.2、使用

Swiper.use([Navigation, Pagination, Autoplay])

4.3、解释：

4.3.1、Navation:前进、后退按钮点击有没有效果；如果没有他，只有样式，点击不起作用

4.3.2、Pagination:分页器出不出现，点击有没有效果；很大的情况下分页器不出现，可能就是这个的影响。

一定要加上clickable: true，这样点击分页器，才有效！（下方有完整代码）

4.3.3、Autoplay:能不能自动播放就靠他！

注意：在this.$nextTick之后使用就行，这个在接下来的一步中。

5、使用watch和this.$nextTick

watch的作用：监听banner的数据，等有了数据之后再创建swiper的实例

this.$nextTick的作用：等v-for遍历循环之后，再执行回调函数

5.1、这两个的作用：

1 、确保有banner轮播图的数据

2、页面中轮播图的结构有了之后，再初始化swiper实例

5.2、使用方法：

watch: {
    // 使用watch监听一下bannerList的数据，从没有到有
    bannerList: {
      handler() {
        // 能到这里说明bannerList已经有数据了
        // 但是必须v-for遍历循环之后（结构有了之后）再new Swiper才行
        this.$nextTick(() => {
          Swiper.use([Navigation, Pagination, Autoplay])
          var mySwiper = new Swiper('.swiper-container', {
            loop: true, // 循环模式选项
            direction: 'horizontal' /*横向滑动*/,

            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              clickable: true
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            },
            autoplay: {
              delay: 1000 //1秒切换一次
            }
          })
        })
      }
    }
  }

6、解决各种不起作用的情况

注意：以下的解决，都是对第四步的解释，只是方便你们找到！！！

6.1、解决没有分页器

分页器出不出现，点击有没有效果；很大的情况下分页器不出现，可能就是这个的影响。

一定要加上clickable: true，这样点击分页器，才有效！（下方有完整代码）

6.2、解决不自动播放

Autoplay:能不能自动播放就靠他！

6.3、解决点击前进后退按钮不起作用

前进、后退按钮点击有没有效果；如果没有他，只有样式，点击不起作用