使用swiper

在vue中使用swiper
贴上官网

看官网的时候看到

image.png

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

image.png

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

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

Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7）
在Swiper 使用方法中也说了，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN

image.png

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

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

npm install [email protected] --save-dev 

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

image.png

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

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

    

        
Slide 1
        
Slide 2
        
Slide 3
    
    
    

    
    
    

    

    
    
    

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%;
    }
  }

遇到的问题

在使用vue中使用vue-awesome-swiper插件制作轮播图时，当鼠标滑动轮播图，控制台报了这样的错（其实是警告）：

image.png

解决

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

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

 {
   touch-action: none;
}

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