原文鏈接：https://www.cnblogs.com/nanjie/p/8556287.html
基于之前寫的vue2.0 + vue-cli + webpack 搭建項(xiàng)目（ vue-awesome-swiper版本：3.1.3 ，如果成功后沒報(bào)錯(cuò)，但不顯示分頁樣式，可能版本對不上）
1.進(jìn)入項(xiàng)目目錄，安裝swiper
npm install vue-awesome-swiper --save
2.引入資源（main.js文件)
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
3.很多人在引入swiper的時(shí)候會出現(xiàn)小點(diǎn)swiper-pagination出不來或者一些配置屬性沒有生效。原因是現(xiàn)在最新的swiper版本已經(jīng)開始區(qū)分組件和普通版本了。
在低版本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',//滾動(dòng)條
? ? mousewheelControl: true,
? ? observeParents: true,
? ? debugger: true,
? ? }
? }
? },
}
</script>
注意！！！！
這其中的autoplay和pagination和prevButton和nextButton等屬性，在低版本中是允許這么使用的，并且可以功能正常生效，但是再高版本swiper中這樣寫不會生效，并且vue不會報(bào)錯(cuò)。如果有報(bào)錯(cuò)的同志們可以試一下swiper4版本的寫法，如下所示：
4.基于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,
? ? ? ? ? ? ? ? //循環(huán)
? ? ? ? ? ? ? ? loop:true,
? ? ? ? ? ? ? ? //設(shè)定初始化時(shí)slide的索引
? ? ? ? ? ? ? ? initialSlide:0,
? ? ? ? ? ? ? ? //自動(dòng)播放
? ? ? ? ? ? ? ? autoplay: {
? ? ? ? ? ? ? ? ? ? delay: 3000,
? ? ? ? ? ? ? ? ? ? stopOnLastSlide: false,
? ? ? ? ? ? ? ? ? ? disableOnInteraction: true,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? //滑動(dòng)速度
? ? ? ? ? ? ? ? speed:800,
? ? ? ? ? ? ? ? //滑動(dòng)方向
? ? ? ? ? ? ? ? direction : 'horizontal',
? ? ? ? ? ? ? ? //小手掌抓取滑動(dòng)
? ? ? ? ? ? ? ? grabCursor : true,
? ? ? ? ? ? ? ? //滑動(dòng)之后回調(diào)函數(shù)
? ? ? ? ? ? ? ? on: {
? ? ? ? ? ? ? ? ? ? slideChangeTransitionEnd: function(){
? ? ? ? ? ? ? ? ? ? ? console.log(this.activeIndex);//切換結(jié)束時(shí)，告訴我現(xiàn)在是第幾個(gè)slide
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? //左右點(diǎn)擊
? ? ? ? ? ? ? ? navigation: {
? ? ? ? ? ? ? ? ? ? nextEl: '.swiper-button-next',
? ? ? ? ? ? ? ? ? ? prevEl: '.swiper-button-prev',
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? //分頁器設(shè)置? ? ? ?
? ? ? ? ? ? ? ? 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
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? },
// 如果你需要得到當(dāng)前的swiper對象來做一些事情，你可以像下面這樣定義一個(gè)方法屬性來獲取當(dāng)前的swiper對象，同時(shí)notNextTick必須為true
? ? computed: {
? ? ? ? swiper() {
? ? ? ? return this.$refs.mySwiper.swiper
? ? ? ? }
? ? },
? ? mounted() {
? ? // 然后你就可以使用當(dāng)前上下文內(nèi)的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>
