使用swiper

在vue中使用swiper
贴上官网

于是屁颠颠去看在vue中使用Swiper6，按照例子一步步来，却发现一直出不来效果，最后看到上面这句话

害，一开头就强调了Swiper组件仅与vue 3兼容，所以vue3可以直接使用，不需要大佬的awesome插件了，百度看到大部分人都说swiper6很坑，而且官方也在更新中还没有稳定。

我们在学习一门插件的时候，应该先仔细阅读一下文档，不要走捷径，下面我把swiper的学习过程记录下来。
重点：

通过上面这张swiper各版本区别对比，我们可以选择一个适合的版本进行开发。

我在这里选择了3.4.1版本
1、安装

npm install swiper@3.4.2 --save-dev 

2、引入js、css
安装完可以看到node_modules/swiper/dist里面有两个文件

import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";

3、使用，HTML内容
https://3.swiper.com.cn/usage/index.html

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

js内容

 var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,
    
    // 如果需要分页器
    pagination: '.swiper-pagination',
    
    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
  })        

css内容

.swiper-container {
    width: 100%;

    .swiper-slide {
      width: 100%;
    }
  }

遇到的问题

直接在给你自己写的 swiper 中添加一个 touch-action: none; 样式，这样就不会报错了，这个样式的作用是 禁止触发默认的手势操作 。

touch-action ：当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。

 {
   touch-action: none;
}

参考https://segmentfault.com/a/1190000013044682