vue 使用 swiper 配合自定义指令实现轮播图插件封装

使用 swiper 配合自定义指令实现轮播图插件封装

前情提要

之前有提到过 swiper 插件的使用，在vue当中，可以在created钩子函数获取之中完成轮播图数据的获取，一共有以下三种实现实例化的方法

1. 然后在updated钩子函数中实现轮播图事件的实例化。

2. 然后使用this.$nextTick()的方法，里面放轮播实例化的回调函数

   this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

3. 通过自定义指令，在里面的inserted钩子函数里面实例化

注意 ：最好是在 dom 元素全部更新完后进行实例化操作，不然每次插入一次轮播图的图片就实例化一次，太消耗性能，而且容易出问题（轮播图的分页器[标识小点]失效）

---

下面就主要来讲一下第三点，在 vue-cli 的搭建的框架里，利用 axios 与 swiper 进行轮播图插件的封装：

1. 下载需要使用到的模块

   yarn add swiper 
   yarn add axios
   

2. 在 components 目录下创建组件为Swiper.vue文件

   components/Swiper.vue

   <template>
       <div class="swiper-container" :class="cName">
         <!--设置的cName用于之后的实例化操作-->
           <div class="swiper-wrapper">
            		<!--获取传递过来的标签将轮播图渲染-->
               <slot></slot>	
           </div>
       </div>
   </template>
   
   <script>
   import "swiper/css/swiper.min.css"		//引入swiper的css样式
   export default {
       props:["cName"]	//获取传递过来的cName，给每一个轮播图绑定相应的类名
   }
   </script>
   

3. 在 utils 目录下创建用于实例化的全局指令在 directives.js文件里

   顺便封装用于发送请求的 axios 类

   utils/directives.js

   import Vue from "vue"
   import Swiper from "swiper"
   Vue.directive("swiper",{	//创建v-swiper指令
       inserted(el,binding,vnode){	
           //代表最后一个元素插入完毕了，再进进行一次实例化操作就可以了
           if(binding.value.current === binding.value.length-1){
               new Swiper("."+binding.value.swipe,{ 
                   pagination:{
                       el:".swiper-pagination"
                   }
               })
           }
       }
   })
   

   utils/http.js

   import axios from "axios"
   
   //这个instance是针对于卖座的接口
   const instance = axios.create({
       baseURL: 'https://m.maizuo.com', //基本的url
       timeout: 3000,  								//延时默认3秒
       headers: {				 							//请求头
           'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"15587791402160368550306","bc":"310100"}'
       } 
   });
   
   export default instance				//导出创建的实例
   

4. 加载自定义指令文件

   src/main.js

   //加载自定义指令文件directive.js
   import "@/utils/directives"
   

5. 在需要使用轮播图的单页面组件引入

   views/Films.vue

   <template>
       <div class="films">
           <Swiper cName="swipe">
               <div 
                   class="swiper-slide"
                   v-for="(banner,index) in banners"
                   :key="banner.bannerId"
                   v-swiper="{
                       current:index,		
                       length:banners.length,
                       swipe:'swipe'
                   }"
               >
                   <img :src="banner.imgUrl" alt="">
               </div>
           </Swiper>
       </div>
   </template>
   <script>
   import Swiper from "@/components/Swiper"	//引入Swiper组件
   import axios from "axios"	//用于发送请求
   import instance from "@/utils/http"	//引入之前创建好的实例
   
   export default {
       components:{
           Swiper  //注册组件Swiper
       },
       data(){
           return {
               banners:[]
           }
       },
       created(){
           //请求数据
           instance.get("/gateway?type=2&cityId=310100&k=3419992",{
               headers:{
                   'X-Host': 'mall.cfg.common-banner'
               }
           }).then(res=>{
               console.log(res)
               this.banners = res.data.data
               //必须要等到页面中出现了swiper-slide结构后，我们才能进行实例化的操作
               // this.$nextTick(()=>{
               //     new Swip(".swiper-container")
               // })
           })
       }
   }
   </script>
   

   以上，就是本人的总结，在使用 swiper 的时候，因为要操作 dom ，所以可以直接采用自定义指令来进行解决，如有不对，欢迎指出~