vue轮播图插件vue-awesome-swiper(2.5.4)与swiper3.0版本相似的使用

 第一种方式：vue-awesome-swiper的用法

一般做移动端轮播图的时候，最常用的就是Swiper插件了，而vue.js也有一个轮播组件vue-awesome-swiper，用法跟swiper3.X相似。

1、安装vie-awesome-swiper

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

2.引用vie-awesome-swiper组件，这里我是用vie-cli创建的项目,在main.js：

import VueAwesomeSwiper from \'vue-awesome-swiper\';
import \'swiper/dist/css/swiper.css\'（如果你使用vue-awesome-swiper的是2.6.0以上的版本要自己手动去加载css）
Vue.use(VueAwesomeSwiper) //记得不要忘记这句

然后就可以在组件中使用该插件（要注意的是该插件有依赖，安装下css-loader和less-loader，不然会出现样式问题）

<template>  
    <div>  
        <swiper :options="swiperOption"  ref="mySwiper">  
            <!-- 这部分放你要渲染的那些内容 -->  
            <swiper-slide v-for="item in items">  
            </swiper-slide>  
            <!-- 这是轮播的小圆点 -->  
            <div class="swiper-pagination" slot="pagination"></div>  
        </swiper>  
    </div>  
</template>  
<script>  
    import { swiper, swiperSlide } from \'vue-awesome-swiper\'  
    export default {  
        components: {  
            swiper,  
            swiperSlide  
        },  
        data() {  
            return {  
                swiperOption: {  
                // 所有配置均为可选（同Swiper配置）
                //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true  
                notNextTick: true,  
                pagination: \'.swiper-pagination\',  
                slidesPerView: \'auto\',  
                centeredSlides: true,  
                paginationClickable: true,  
                spaceBetween: 30,  
                    onSlideChangeEnd: swiper => {  
                        //这个位置放swiper的回调方法  
                        this.page = swiper.realIndex+1;  
                        this.index = swiper.realIndex;  
                    }  
                }  
            }  
        },  
        //定义这个sweiper对象  
        computed: {  
  
            swiper() {  
              return this.$refs.mySwiper.swiper;  
            }  
        },  
        mounted () {  
            //这边就可以使用swiper这个对象去使用swiper官网中的那些方法  
            this.swiper.slideTo(0, 0, false);  
        }  
  
    }  
</script>  
<style>  
</style>  

vue轮播图插件vue-awesome-swiper得使用来自：http://blog.csdn.net/xiaogezl/article/details/69676812

第二种方式：

<div class="chua_content">
                <!--轮播 S-->
       <swiper :options="swiperOption"  ref="mySwiper">  
            <!-- 这部分放你要渲染的那些内容 -->  
            <swiper-slide v-for="value in lbt" key="index">  
               <img :src="value.imgs">
            </swiper-slide>  
            <!-- 这是轮播的小圆点 -->  
            
        </swiper>  
       <div id="num-pagination">
               <span id="active-num">{{page}}</span>/<span id="all-num">{{lengths}}</span>
          </div>
       <!--轮播 E-->
           </div>

export default {
  data(){
      return{
          lbt:[
        {
          \'imgs\':\'../../static/images/detail_1.jpg\'
        },{
          \'imgs\':\'../../static/images/detail_2.jpg\'
        }
      ],
      page:0,
      lengths:0,
      swiperOption: {  
                //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true  
                notNextTick: true,  
                slidesPerView: \'auto\',  
                centeredSlides: true,   
                onInit:swiper =>{
                  //console.log(swiper);
                  this.page=swiper.realIndex+1;
                  this.lengths=swiper.slides.length;
                },
                onSlideChangeEnd: swiper => {  
                        //这个位置放swiper的回调方法  
                        this.page = swiper.realIndex+1;  
                        //this.index = swiper.realIndex;  
                    }  
                }  
      }
  },
  computed:{
    swiper(){
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted(){
    this.swiper.slideTo(0, 0, false);
  },
  components:{
    swiper,
    swiperSlide
  }
}

 

 

 

 

 

原文来自：http://blog.csdn.net/yidboy/article/details/62887206