记录一次vue项目中swiper的使用以及遇到的问题

一、swiper版本：8.3.2；vue2

二、实现的轮播效果，一行多个slide

命令：

npm install swiper -S

main.js中引入：

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

//修改了下面这行代码 swiper中的page需要单独引入，否则不显示 自动播放也是需要引入
import Swiper, {Navigation, Pagination，Autoplay} from "swiper";
//新加了下面这行代码
Swiper.use([Navigation, Pagination，Autoplay]);
new Swiper('.swiper')

对应页面相关代码：

<div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in 8" :key="item">
            <Novnc />
          </div>
        </div>
        <!-- 如果需要分页器 代码稍作调整，整体不变 -->
        <div class="swiper-pagination"></div>
      </div>

mounted() {
    this.getSwiper()
  },
  methods: {
    getSwiper() {
      new Swiper('.swiper-container', {
        loop: false,
        slidesPerView: 4, //一页展示4个slide
        spaceBetween: 10,  //每个slide之间间距10px
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
          type: 'progressbar',  //分页展示的类型
        },
        // 如果需要滚动条
        scrollbar: '.swiper-scrollbar',
      })
    },
  }

对应样式代码：

.swiper-container {  
  position: relative;
 /* 务必设置一下宽以及超出隐藏 */
  width: 1230px;
  overflow: hidden;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
  /* 设置分页的位置 */
.swiper-pagination { 
  top: auto !important;
  bottom: 0;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

三、问题回顾

由于代码原因遇到的问题代码中已做标注；以上基本可以实现基础轮播图显示，部分细节调整可以参考官方文档；

业务需求衍生问题：

1.轮播数据改变后轮播图不变化：通过监听数据变化，重新执行轮播方法

2.轮播图变化不完善：

this.$nextTick(() => {
        this.getSwiper() //监听后这样执行
      })

3.轮播图的元素通过参数控制显隐后整体效果变乱：轮播slide的显隐控制采用v-show，不要使用v-if；