1、Swiper

官方文檔鏈接：Swiper中文網(wǎng)-輪播圖幻燈片js插件,H5頁面前端開發(fā)
Swiper是一個(gè)非常強(qiáng)大的輪播插件，Swiper是純javascript打造的滑動(dòng)特效插件，面向手機(jī)、平板電腦等移動(dòng)終端。并且Swiper不依賴于任何框架，意味著單純的html+css也可以去引用，jquery或是Vue等等，都可以去使用。

2、Vue中使用Swiper

建議不要直接依據(jù)官方文檔的npm安裝，npm i swiper --save下載下來的是默認(rèn)最新的@6.6.7版本，但是這個(gè)版本貌似存在個(gè)問題，就是依賴包的文件路徑和官網(wǎng)的說明存在差異，在6.x版本，根本沒有看到dist目錄，所以建議用4.x的版本，只需要在安裝的時(shí)候在后面指定版本號就可以

swiper的css文件.png

• 1、安裝swiper
  npm install swiper@4.5.1 --save
• 2、安裝vue-awesome-swiper
  npm install vue-awesome-swiper@3 --save-dev
• 3、開始引入相關(guān)依賴文件

import { Swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

• 4、使用
  直接使用的話就非常簡單，按照官網(wǎng)的demo去寫就ok，但作為一個(gè)Vue的追隨者，必然覺得有必要作為組件去封裝使用，從而提升開發(fā)效率。
  Swiper使用方法 - Swiper中文網(wǎng)

3、Swiper使用的常見問題解決方案

swiper最常見的一個(gè)問題就是swiper初始化過早的問題，這個(gè)問題帶來的影響則是圖片無法滾動(dòng)，比如最常見的情形之一：動(dòng)態(tài)渲染異步請求數(shù)據(jù)，如果swiper初始化是放在mounted生命周期中，mounted生命周期又僅會執(zhí)行一次，而此時(shí)的數(shù)據(jù)列表的長度是為0的，檢測方法就是去打印數(shù)組list.length，查看是否為0，如果是0，那么就需要將swiper初始化的位置進(jìn)行更換

• 解決方案一：將swiper初始化的位置由mounted鉤子函數(shù)改為updated鉤子
• 解決方案二：給自定義的swiper組件加上一個(gè)唯一的key值

4、Vue中對Swiper的二次封裝

內(nèi)容區(qū)域使用的是具名插槽，匿名插槽也可以做，但是使用具名更嚴(yán)謹(jǐn)一點(diǎn)，使用插槽的原因是針對于不清楚使用者需要輪播的是圖片，還是文字，亦或是圖片加文字標(biāo)題。

• mySwiper.vue組件：

<template>
  <div class="swiper-container mySwiper">
    <div class="swiper-wrapper">
      <!-- 存放具體的輪播內(nèi)容 -->
      <slot name="swiper"></slot>
    </div>
    <!-- 如果需要分頁器 -->
    <div v-if="setting.usePagination || true" class="swiper-pagination"></div>
    <!-- 如果需要導(dǎo)航按鈕 -->
    <div v-if="setting.useSwiperBtn || false" class="swiper-button-prev"></div>
    <div v-if="setting.useSwiperBtn || false" class="swiper-button-next"></div>
    <!-- 如果需要滾動(dòng)條 -->
    <div v-if="setting.useSwiperScroll || false" class="swiper-scrollbar"></div>
  </div>
</template>

<script>
import { Swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  props: ["swiperSetting"],
  data() {
    return {
      setting: {},
    };
  },
  mounted() {
    // 判斷用戶是否做了設(shè)置項(xiàng)，做了就傳進(jìn)來，沒做的話就全部按照開發(fā)的默認(rèn)配置項(xiàng)設(shè)置
    this.setting = this.swiperSetting ? this.swiperSetting : {};
    console.log(this.swiperSetting);
  },
  updated() {
    new Swiper(".mySwiper", {
      loop: this.setting.loop || true, //是否循環(huán)
      spaceBetween: this.setting.spaceBetween || 30,
      centeredSlides: this.setting.centeredSlides || true,
      // 自動(dòng)播放輪播
      autoplay: {
        delay: this.setting.delay || 1500,
        disableOnInteraction: this.setting.disableOnInteraction || true,
      },
      // 左右導(dǎo)航
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      //分頁器
      pagination: {
        el: ".swiper-pagination",
        type: this.setting.paginationType || "bullets",
      },
      //方向
      direction: this.setting.direction || "horizontal",
      //特效
      effect: this.setting.effect || "slide",
      //修改swiper自己或子元素時(shí)，自動(dòng)初始化swiper
      observer: true,
      //修改swiper的父元素時(shí)，自動(dòng)初始化swiper
      observeParents: true,
    });
  },
  methods: {},
};
</script>

<style  scoped>
.swiper-container {
  width: 740px;
  height: 450px;
}
</style>

• 父組件中去使用mySwiper組件：

<template>
  <div id="demo">
    <MySwiper :swiperSetting="swiperSetting">
      <div v-for="item in dataList" :key="item.id" class="swiper-slide" slot="swiper" >
        <img :src="item.imgUrl">
      </div>
    </MySwiper>
  </div>
</template>

<script>
import axios from "axios";
// 引入自定義的Swiper組件
import MySwiper from "./mySwiper.vue";
export default {
  name: "demo",
  components: {
    MySwiper,
  },
  data() {
    return {
      dataList: [],
      // swiper的配置項(xiàng)
      swiperSetting:{
        loop:true,//是否循環(huán)
        spaceBetween:30,//slide之間設(shè)置距離
        centeredSlides:true,//設(shè)定為true時(shí)，active slide會居中
        delay:1500,//自動(dòng)播放的時(shí)間間隔設(shè)置
        usePagination:true,//是否使用分頁器
        useSwiperBtn:false,//是否使用左右導(dǎo)航按鈕
        useSwiperScroll:false,//是否使用滾動(dòng)
        disableOnInteraction:true,//用戶操作swiper之后，是否禁止autoplay
        paginationType:'fraction',//分頁器樣式類型
        direction:'horizontal',//輪播方向設(shè)置
        effect:'coverflow',//切換動(dòng)畫效果設(shè)置
      }
    };
  },
  mounted() {
    this.handleGetSwiper();
    console.log(this.dataList);
  },
  methods: {
    //模擬請求的輪播接口數(shù)據(jù)
    handleGetSwiper() {
      this.dataList = [
        {
          id: new Date().getTime(),
          imgUrl:
            "http://gw.alicdn.com/imgextra/i2/O1CN01uQSXQn1PgVKUPbnXp_!!6000000001870-0-tps-740-420.jpg_Q75.jpg",
        },
        {
          id: new Date().getTime() + 1,
          imgUrl:
            "http://gw.alicdn.com/imgextra/i3/O1CN0195pI9I24Uxau5s23D_!!6000000007395-0-tps-740-420.jpg_Q75.jpg",
        },
        {
          id: new Date().getTime() + 2,
          imgUrl:
            "http://gw.alicdn.com/imgextra/i1/O1CN01NyXBR71gZx8JEc2Ma_!!6000000004157-0-tps-740-420.jpg_Q75.jpg",
        },
        {
          id: new Date().getTime() + 3,
          imgUrl:
            "http://gw.alicdn.com/imgextra/i1/O1CN01AAMxzp1NvV4CV7XE1_!!6000000001632-0-tps-740-420.jpg_Q75.jpg",
        },
        {
          id: new Date().getTime() + 4,
          imgUrl:
            "http://gw.alicdn.com/imgextra/i4/O1CN01GNiAeO24E0wFLwrjd_!!6000000007358-0-tps-740-420.jpg_Q75.jpg",
        },
      ];
    },
  },
};
</script>

<style scoped>
</style>

二次封裝的Swiper加入了配置項(xiàng)，如果針對使用者的個(gè)人喜歡去進(jìn)行配置，如果不需要做配置的話，就不需要加入swiperSetting配置，同時(shí)，對于swiperSetting設(shè)為對象的處理還有個(gè)原因，就是可以后期需要加入其他屬性時(shí)，能夠更容易拓展。

5、動(dòng)畫效果

• 使用了配置項(xiàng)的輪播：
  
  使用了配置項(xiàng)的輪播.gif
• 使用了默認(rèn)配置項(xiàng)的輪播：
  
  使用了默認(rèn)配置項(xiàng)的輪播.gif