vue3.0项目中使用swiper8遇到的坑

参考文档
https://swiperjs.com/vue

基础使用方法

<template>
  <swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script>
  // import Swiper core and required modules
  import {
    
     Navigation, Pagination, Scrollbar, A11y } from 'swiper';

  // Import Swiper Vue.js components
  import {
    
     Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  import 'swiper/css/scrollbar';

  // Import Swiper styles
  export default {
    
    
    components: {
    
    
      Swiper,
      SwiperSlide,
    },
    setup() {
    
    
      const onSwiper = (swiper) => {
    
    
        console.log(swiper);
      };
      const onSlideChange = () => {
    
    
        console.log('slide change');
      };
      return {
    
    
        onSwiper,
        onSlideChange,
        modules: [Navigation, Pagination, Scrollbar, A11y],
      };
    },
  };
</script>

遇到的问题

1、配置navigation后，默认的上一个下一个按钮是显示在swiper内部的，现在需求是要求显示到外部，此时就需要自己手写按钮，来手动触发上一个下一个的方法，解决方案如下

<div class="btn prev" @click="toPrev"></div>
  <swiper @swiper="onSwiper" @slideChange="onSlideChange"></Swiper>
<div class="btn next" @click="toNext"></div>

setup(props, ctx) {
    
    
	let mySwiper = null
      const onSwiper = (swiper) => {
    
    
        mySwiper = swiper// 初始化swiper
      };
      const onSlideChange = () => {
    
    // 触发上一个下一个按钮时会触发
        console.log('slide change');
      };
      const toNext = () => {
    
    
        nextTick(() => {
    
    
          mySwiper.slideNext()
        })
      }
      const toPrev = () => {
    
    
        nextTick(() => {
    
    
          mySwiper.slidePrev()
        })
      }
}

2、swiper在使用静态数据时，配置loog:true后可以循环播放，但是数据变成动态赋值后，无法循环播放了。

找了很久，才知道是跟swiper的渲染时机有关系，在旧版本的swiper中，可以通过配置observer、observeParents属性为true来监听swiper本身或者是父级元素发生变化时，更新Swiper 并触发 observerUpdate 事件。
参考文档
https://www.swiper.com.cn/api/observer/219.html
但是在swiper中尝试了一下，无法配置这两个属性，也可能是自己没配置对。最后都打算放弃使用swiper了，看到一篇文章，是通过v-if来控制swiper的显示时机，从而来让swiper在有数据的情况下在渲染，就可以解决无法循环播放的问题了，代码如下

<swiper
      v-if="sliders.length > 0"
<Swiper>

3、在slider个数过少的时候，可能会需要禁止鼠标能拖动swiper，此时可以通过动态给swiper容器添加swiper-no-swiping类名来实现

<swiper
    :modules="modules"
    :class="disabled?'swiper-no-swiping': ''"
    :slides-per-view="3"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>

完善中……