vue的爬坑之路（三）之基于vuecli的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;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