一、安装swiper：npm install swiper
二、在入口文件main.js引入swiper样式：import "swiper/dist/css/swiper.css" 或者import "swiper/css/swiper.css"
注意：在这里需要注意，swiper版本不一样引入的方式也会有所不同，比如npm install swiper安装的版本是"swiper": "5.2.1",这时候打开node_modules 发现没有dist这一级目录了，所以这时候的引入方式就是import "swiper/css/swiper.css"，看具体css的存放位置
如果想引入之前存在dist目录的swiper插件，就需要安装swiper的另外版本，比如："swiper": "4.4.2",这时候在node_modules中会存在dist目录，直接import "swiper/dist/css/swiper.css"引入就可以了
三、在你需要实现轮播的模块组件中去引入swiper：import Swiper from "swiper";
四、我们列举一个移动端上下轮播的案例
比如有四个需要轮播的模块，我们创建四个.vue文件，.vue组件里面具体就是你自己的页面了，然后使用vue的<component :is="xxx"></component>的方式动态引入这需要轮播的八个模块组件
实现方法如下：
1、dom结构
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(val,index) in componentList"> <component :key="index" :is="val"></component> </div> </div> </div>
2、script中引入.vue文件
import Swiper from "swiper"; var componentList = { componentOne: require ('./components/one.vue').default, componentTwo: require ("./components/two.vue").default, componentThree: require ('./components/three.vue').default, componentFour: require ("./components/four.vue").default };
3、data中定义
data () { return { componentList: ['componentOne', 'componentTwo', 'componentThree', 'componentFour'], } },
4、components中注册组件
components: componentList,
5、初始化swiper
mounted () { this.initSwiper (); }, methods: { initSwiper () { mySwiper = new Swiper (".swiper-container", { centeredSlides: true, initialSlide: 0, //设定初始化时slide的索引 pagination: { el: ".swiper-pagination", clickable: true }, direction: 'vertical',//水平(horizontal)或垂直(vertical) watchOverflow: true,//因为仅有1个slide，swiper无效 scrollbar: { el: '.swiper-scrollbar',//自动隐藏 }, preventClicks: false,//当swiper在触摸时阻止默认事件（preventDefault），用于防止触摸时触发链接跳转。 }); mySwiper.on ('slideChange', () => { //this.swiperContainer.activeIndex; 当前切换的组件索引index }); }, }, }
6、如果有向下提示切换的箭头，点击之后去下一页，实现方法是：
mySwiper.slideTo (mySwiper.activeIndex + 1, 500, false); //mySwiper.activeIndex 当前索引，切换到下一个 ，所以+1 //500 切换的过度时间
好了，这样vue就可以正常使用swiper了，具体内部的其他配置可以查看swiper官方文档：https://www.swiper.com.cn/api/index.html
交流
对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！欢迎关注公众号共同学习。
