vue的爬坑之路（三）之-----基於vue-cli的VueAwesomeSwiper輪播滑塊插件的使用及常見問題

基於以前寫的vue2.0 + vue-cli + webpack 搭建項目（ vue-awesome-swiper版本：3.1.3 ，若是成功後沒報錯，但不顯示分頁樣式，可能版本對不上）

1.進入項目目錄，安裝swiper

npm install vue-awesome-swiper --save

2.引入資源（main.js文件)

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

3.不少人在引入swiper的時候會出現小點swiper-pagination出不來或者一些配置屬性沒有生效。緣由是如今最新的swiper版本已經開始區分組件和普通版本了。

在低版本swiper中，咱們能夠這麼寫

<script>
 // swiper options example:
 export default {
  name: 'carrousel',
  data() {
   return {
    swiperOption:
     notNextTick: true,
     // swiper configs 全部的配置同swiper官方api配置
     autoplay: 3000,
     direction: 'vertical',
     grabCursor: true,
     setWrapperSize: true,
     autoHeight: true,
     pagination: '.swiper-pagination',
     paginationClickable: true,
     prevButton: '.swiper-button-prev',//上一張
     nextButton: '.swiper-button-next',//下一張
     scrollbar: '.swiper-scrollbar',//滾動條
     mousewheelControl: true,
     observeParents: true,
     debugger: true,
    }
   }
  },
  
 }
</script>

注意！！！！

這其中的autoplay和pagination和prevButton和nextButton等屬性，在低版本中是容許這麼使用的，而且能夠功能正常生效，可是再高版本swiper中這樣寫不會生效，而且vue不會報錯。若是有報錯的同志們能夠試一下swiper4版本的寫法，以下所示：

5.基於swiper4組件配置(HelloWorld.vue文件或其餘 .vue文件)

<template>
    <swiper :options="swiperOption" ref="mySwiper">
        <!-- 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>
        <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>
    </swiper>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
require('swiper/dist/css/swiper.css')
export default {
    name: 'carrousel',
    components: {
        swiper,
        swiperSlide
    },
    data() {
        return {
            swiperOption: {
                notNextTick: true,
                //循環
                loop:true,
                //設定初始化時slide的索引
                initialSlide:0,
                //自動播放
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: true,
                },
                //滑動速度
                speed:800,
                //滑動方向
                direction : 'horizontal',
                //小手掌抓取滑動
                grabCursor : true,
                //滑動以後回調函數
                on: {
                    slideChangeTransitionEnd: function(){
                      console.log(this.activeIndex);//切換結束時，告訴我如今是第幾個slide
                    },
                },
                //左右點擊
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                //分頁器設置         
                pagination: {
                   el: '.swiper-pagination',
                   clickable :true,
                   type: 'custom',
                   //自定義分頁器樣式
                   renderCustom: function (swiper, current, total) {
                        const activeColor = '#168fed'
                        const normalColor = '#aeaeae'
                        let color = ''
                        let paginationStyle = ''
                        let html = ''
                        for (let i = 1; i <= total; i++) {
                            if (i === current) {
                                color = activeColor
                            } else {
                                color = normalColor
                            }
                            paginationStyle = `background:${color};opacity:1;margin-right:20px;width:20px;height:20px;transform:skew(15deg);border-radius:0;`
                            html += `<span class="swiper-pagination-bullet" style=${paginationStyle}></span>`
                        }
                        return html
                    }
                }
            }
        }
    },
 
 // 若是你須要獲得當前的swiper對象來作一些事情，你能夠像下面這樣定義一個方法屬性來獲取當前的swiper對象，同時notNextTick必須爲true
    computed: {
        swiper() {
         return this.$refs.mySwiper.swiper
        }
    },
    mounted() {
    // 而後你就可使用當前上下文內的swiper對象去作你想作的事了
    // console.log('this is current swiper instance object', this.swiper)
    // this.swiper.slideTo(3, 1000, false)
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.swiper-container{
  height:200px;
  overflow: hidden;
  margin-top:88px;/*px*/
}
.swiper-wrapper{
  height:200px;
}
.swiper-slide{
  height:200px;
  float: left;
  background:red;
}


</style>

以上是我總結出來的東西，安裝的版本不一樣所對應的配置也就有所不一樣，請根據自身狀況選擇配置，高版本的就要對應swiper最新版的配置方法，不知道的本身都試試就能夠啦~

參考連接：http://www.jb51.net/article/132681.htm