後盾網lavarel視頻項目---Vue項目使用vue-awesome-swiper輪播插件

後盾網lavarel視頻項目---Vue項目使用vue-awesome-swiper輪播插件

1、總結

一句話總結：

vue中的插件的使用和js插件的使用同樣的簡單，只是vue插件的引入過程有些不一樣

項目src文件夾下的main.js入口文件中

import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */)

 

 

2、前端進擊之路——Vue項目使用vue-awesome-swiper輪播插件

轉自或參考：前端進擊之路——Vue項目使用vue-awesome-swiper輪播插件
https://blog.csdn.net/u014027876/article/details/81663080

　　
1.首先呢，咱們去gitHub上面找一個vue-awesome-swiper插件。
 

 

 

爲了保證整個項目的穩定性，咱們安裝2.6.7版本。

npm install vue-awesome-swiper@2.6.7 --save

2.安裝好之後如何使用呢？由於咱們這個項目可能在各個頁面上都會用到swiper輪播這個插件，因此咱們就在全局引入這個插件。進入項目src文件夾下的main.js入口文件，加入以下幾行代碼：

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

接下來就是使用方法啦，具體模板以下：

<template>
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <swiper-slide>I'm Slide 7</swiper-slide>
    <!-- Optional controls -->
    <!-- 若是須要分頁器 -->
    <div class="swiper-pagination" slot="pagination"></div>
    <!-- 若是須要導航按鈕 -->
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <!-- 若是須要滾動條 -->
    <div class="swiper-scrollbar" slot="scrollbar"></div>
  </swiper>
</template>

因爲個人項目中只進行圖片輪播，不須要滾動條和導航按鈕，因此個人代碼以下：

<template>
  <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide> 
        <img src=""/>
    </swiper-slide>
    <swiper-slide> 
        <img src=""/>
    </swiper-slide>
    <!-- 若是須要分頁器 -->
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

完成上述代碼之後就能夠看到圖片有輪播效果啦，可是圖片大小與屏幕好像不匹配，這個時候咱們就要給每一個img標籤加一個class，將其width設爲100%就能夠啦~

爲了解決屏幕抖動問題，咱們須要在swiper外面加一層class=「wrapper」的div包裹，而後在css樣式中利用padding-bottom屬性來完成圖片的自適應高度佔位，防止圖片未加載出來到加載完成過程當中屏幕出現抖動。具體css樣式代碼以下：`

.wrapper
     overflow:hidden
     width:100%
     height:0
     padding-bottom:30.48%
     background: #eee
     .swiper-img
     width:100%

敲黑板！重點內容來啦~~
爲何採用padding-bottom就能夠實現高度自適應呢？由於padding-bottom以百分比進行顯示的時候是相對於父元素的width而言的。咱們將swiper的父級元素wrapper寬度設置爲100%是相對於wrapper父元素的寬度而言的，padding-bottom設置爲30.48%也是相對於wrapper父元素的寬度而言的，但因爲wrapper的寬度已經和它父元素寬度相等（100%）了，因此padding-bottom就至關於wrapper元素的高寬比就是30.48%，它的高度就會相對於它的寬度自動撐開30.48%。

接下來講說swiper中分頁器的使用

<script> export default { name: 'HomeSwiper', data() { return { swiperOption: { // some swiper options/callbacks // 全部的參數同 swiper 官方 api 參數 pagination: '.swiper-pagination', //分頁器掛載到swiper-pagination類對應的元素上 loop: true //開啓輪播圖先後循環模式 } } }, } </script>

設置好分頁器以後輪播圖上就有了幾個小圓點了，默認選中的圓點是藍色的，可是設計圖中是白色的，那麼這就很致命了，因而咱們找到小圓點對應的元素是被.swiper-pagination-bullet-active控制的，因此咱們從這個上面入手去修改顏色。
然鵝這個類不是咱們當前組件中定義的元素，因此在以scoped修飾的css代碼中咱們不能直接修改該元素的樣式，這個時候，咱們就要用到樣式「穿透」，從而能夠不受scoped的限制來修改樣式了。具體代碼以下：

.wrapper >>> .swiper-pagination-bullet-active
    background:#fff

3.最後，咱們利用v-for來實現圖片的循環輸出，最終代碼以下：

<template>
    <div class="wrapper">
        <swiper :options="swiperOption" >
            <swiper-slide v-for='item of swiperList' :key="item.id">
                <img :src="item.imgUrl" class="swiper-img">
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script> export default { name: 'HomeSwiper', data: function () { return { swiperOption: { pagination: '.swiper-pagination', loop: true }, swiperList:[{ id:"0001", imgUrl:"http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg" },{ id:"0002", imgUrl:"http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg" }] } } } </script>

<style lang="stylus" scoped> .wrapper >>> .swiper-pagination-bullet-active background:#fff .wrapper overflow: hidden width: 100% height: 0 padding-bottom: 30.48% background: #ccc .swiper-img width: 100% </style>

---

噹噹噹~~最終效果圖呈上來咯：