vue使用插件做輪播圖

vue使用 vue-awesome-swiper制作輪播圖。

1.訪問github，搜索vue-awesome-swiper，查看用法。

第一個坑：github居然訪問不了。

解決辦法：參考別人 https://www.cnblogs.com/Owen-ET/p/10868620.html

其實訪不訪問都沒關系，照着下面步驟來就可以了。

 

2.安裝 vue-awesome-swiper指定版本

第二個坑：必須用這個版本，要不然后面很多bug了。

npm i  vue-awesome-swiper@2.6.7 --save

 

3.在component文件夾里新建Swipe.vuer組件，然后把粘貼下面代碼：

<template>
  <div>
    <div class="wrapper">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item,i) in picList" :key="i"><img :src="item.src"></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>
<script>
export default {
  name: "Swiper", // 此處不能用Swiper作為name，否則報錯
  data() {
    return {
      swiperOptions: {
        pagination: ".swiper-pagination", // 輪播圖的點
        loop:true, // 循環
      },
      picList:[
          {id:0,src:'https://gtms01.alicdn.com/tps/i1/T1Ww_JFEpdXXcZd9sr-640-200.png'},
          {id:1,src:'https://gw.alicdn.com/imgextra/i3/149/O1CN01wekXPw1CyHZ23AC4R_!!149-0-lubanu.jpg'}
      ]
    };
  }
};
</script>

 

/* 圖片100% */
.swiper-slide img {
    width: 100%;
}

 

 

父組件引入Swipe.vue

第三個坑：這個新建的Swiper.vue的name不能叫Swiper！！！！！叫別的，比如，HomeSwiper

不然會報下面的錯：

 

 

4.此時，這個輪播圖，已經可以滑來滑去了。很開心了么。然后你滑來滑去的時候，居然發現，又有個警告了。

第四個坑：滑來滑去，發現下面這個錯誤

 

 解決辦法：在App.vue里加上下面的樣式。

/* 解決輪播圖滑動報錯 */
*{touch-action: none;} 

 

5.出現在輪播圖上的點，默認是藍色的，要改成白色比較好看。

第五個坑：直接設置成白色是不行的。。。

解決辦法：

<style lang="css" scoped>
 
.wrapper >>> .swiper-pagination-bullet-active{
    background-color: #fff !important;
}
</style>

效果：

 

 

完整代碼：

Swiper.vue

<template>
  <div>
    <div class="wrapper">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="(item,i) in picList" :key="i"><img :src="item.src"></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>
<script>
export default {
  name: "HomeSwiper", // 此處不能Swiper作為name，否則報錯
  data() {
    return {
      swiperOptions: {
        pagination: ".swiper-pagination", // 輪播圖的點
        loop:true, // 循環
      },
      picList:[
          {id:0,src:'https://gtms01.alicdn.com/tps/i1/T1Ww_JFEpdXXcZd9sr-640-200.png'},
          {id:1,src:'https://gw.alicdn.com/imgextra/i3/149/O1CN01wekXPw1CyHZ23AC4R_!!149-0-lubanu.jpg'}
      ]
    };
  }
};
</script>
<style lang="css" scoped>
 
.wrapper >>> .swiper-pagination-bullet-active{
    background-color: #fff;
}
/* 圖片100% */
.swiper-slide img {
    width: 100%;
}
</style>

App.vue

<style>
/* 解決輪播圖滑動報錯 */
*{touch-action: none;} 
</style>