第一步 安装

进入项目目录 执行 cnpm/npm install vue-awesome-swiper 进行安装 需要注意的是css-loader和less-loader也需要安装 否则样式无法正常使用

第二步 调用

在main.js里添加如下代码

import VueAwesomeSwiper from 'vue-awesome-swiper' //引入插件

require('swiper/dist/css/swiper.css') //引入css 其他地方都没有写这一句 但是在实际操作中 这句话不能少

Vue.use(VueAwesomeSwiper) //调用插件

第三步 使用

    <swiper :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="(img,index) in imgs":key="index" >
            <a class="fd_slide"><img :src="img.url"></a>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

<script>
    import Vue from 'vue'
    import { swiper, swiperSlide, swiperPlugins } from 'vue-awesome-swiper'
    export default{
        components: {
            swiper,
            swiperSlide
        },
        data(){
            return {
                swiperOption: {
                    initialSlide:0,//设定初始化时slide的索引
                    direction:'horizontal',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
                    loop: true,  //无限滚动
                    speed:300,   //滑动速度
                    pagination: '.swiper-pagination',  //分页器
                    paginationClickable: true,
                    autoplay: 2500,
                    onSlideChangeEnd: swiper => { //滑动之后回调函数
                        console.log('onSlideChangeEnd', swiper.realIndex) //切换结束时，告诉我现在是第几个slide
                    }
                },
                imgs:[
                    { url:'http://xxx/ban_02.jpg' },
                    { url:'http://xxx/ban_04.jpg' },
                    { url:'http://xxx/ban_08.jpg' },
                ]
            }
        },
    }
</script>

4 修改

毫无疑问这个插件是很好用的 但是再好的组件也不能满足用户的所有要求 这款插件专注于功能 对于样式上的问题并没有给出太多方案

我做项目时 轮播图的分页器样式不是我要的 我在网上一直查找没有找到好的办法 索性就直接去改了插件里的样式 也就是刚开始引用的这个swiper.css 这种方法算是很粗暴的了 而且说实话我个人并不推荐使用这种方法 但是我目前没有好的办法 希望有大神知道的话可以提出好的意见

以上内容就是我在实际开发中结合前人的经验总结出来的 有任何问题欢迎大家指正 谢谢