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

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

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

一、安装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