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