vue中使用vue-awesome-swiper實作圖檔輪播效果(超詳細解析)

首先我們先了解一下vue-awesome-swiper

什麼是vue-awesome-swiper?

Swiper常用于移動端網站的内容觸摸滑動

Swiper是純javascript打造的滑動特效插件，面向手機、平闆電腦等移動終端，以及PC端網站。Swiper能實作觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果.

安裝:

npm install vue-awesome-swiper --save      

先看一下我的項目結構吧:

項目建立指令:

vue init webpack whiteware      

whiteware是項目名稱

安裝node.js在這裡就不說了,再扯都扯零基礎上了

我們這篇部落格是為了用vue-awesome-swiper實作輪播效果,這是大佬封裝好的一個輪播插件

安裝好之後我們需要在項目中src > main.js中引入一下,我這裡是全局引入,當然也可以局部引入,看個人需求

import App from './App'
import router from './router'
import axios from 'axios'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'


Vue.config.productionTip = false
Vue.use(VueAwesomeSwiper, /* { default global options } */)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})      

一定不要忘了Vue.use(VueAwesomeSwiper, /* { default global options } */)

這樣我們就可以去元件裡用了

當然也可以把輪播單獨寫一個元件來用,在這裡就不那麼麻煩了

html:

<!-- 輪播圖 -->
<div class="banner" >
  <div class="banner_bg"></div>
  <div class="banner_wrap">
    <!-- 加上v-if="banner_data.length > 1" 來防止swiper出現無法循環播放的效果 -->
    <swiper :options="swiperOption" v-if="bannerList.length>1"  class="banner-swiper-container swiper-container" style="border-radius: 0.15rem;">
      <swiper-slide class="swiper-wrapper" v-for="(item, index) in bannerList" :key="index">
        <a href="" style="border-radius: 0.15rem;">
          <img :src="item.image" :alt="item.title">
        </a>
      </swiper-slide>
    </swiper>
  </div>
</div>      

js:

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default{
  components:{
      swiper,
      swiperSlide
  },
  name:'Index',
  data(){
    return {
      
      // 輪播圖
      bannerList: [],        //圖檔清單
      swiperOption: {
        observeParents:true,
        pagination: '.swiper-pagination',
        paginationClickable: true,    //分頁可點選
        slidesPerView: 1,    //每次滑動圖檔一張
            slidesPerGroup: 1,    //每個div隻有一張圖檔
        loop: true,        //false 不循環    true循環
        // grabCursor: true,  //滑鼠光标
            autoplay: {
              delay: 2000,    //秒
              stopOnLastSlide: false,
                disableOnInteraction: false,//滑動不會失效
            },
      },
    }
  },
  
}      

css;

/*輪播圖*/
  .banner {
      width: 100%;
      height: 2.9rem;
  }
  .banner_bg {
      width:100%;
      height:1rem;
      background: -webkit-linear-gradient(left, #fb5524 , #ff3052); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #fb5524, #ff3052); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(right, #fb5524, #ff3052); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right, #fb5524 , #ff3052); /* 标準的文法 */
      position:absolute;
  }
  .banner_wrap {
      padding: 0 0.2rem;
  }
  
  .banner .swiper-container {
      width: 100%;
      height: 100%;
  }
  
  .banner .swiper-container .swiper-wrapper {
      width: 100%;
      height: 100%;
  }
  
  .banner .swiper-container .swiper-wrapper .swiper-slide {
      height: 100%;
  }
  
  .banner .swiper-container .swiper-wrapper .swiper-slide img {
      width: 100%;
      height: 100%;
      border-radius: 0.15rem;
  }
  
  .banner .swiper-container .banner-swiper-pagination {
      bottom: 0;
      height: 0.3rem;
  }
  
  .banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
      width: 0.24rem;
      height: 0.04rem;
      opacity: 1;
      background: #000;
      border-radius: 0;
  }
  
  .banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
      background: #ffffff;
  }
  
  .scroll-box {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      /*height: 100vh;*/
      overflow: hidden;
  }
  /* END */      

以上就是全部代碼了,很簡單

最後附上一張效果圖吧