vue-awesome-swiper使用紀實

最近做一個項目，需要用到輪播和全屏滑動功能，所以用到了vue-awesome-swiper插件，以下為個人記錄下此插件的用法。

效果說明：

 

• 上面部分是個輪播圖，自動開始輪播，輪播間隔為3000ms
• 推薦和軟件是兩個tab，點擊可切換當前顯示
• 最下面是個可左右滑動區域，分別對應推薦和軟件兩個tab

 

 

1、安裝依賴

npm install --save vue-awesome-swiper

2、引入組件和樣式

//App.vue
<script>
import 'swiper/dist/css/swiper.css'
import {swiper,swiperSlide} from 'vue-awesome-swiper'
export default {
  name: 'App',
  components: {
    swiper,
    swiperSlide
  },
}
</script

3、使用swiper和swiperSlide組件

　　<div class="swiper-container swiper-container1">
        <swiper class="swiper-wrapper" :options="bannerOptions" ref="bannerSwiper">
            <swiper-slide class="swiper-slide">
                <img class="container1-img" src="./assets/logo.png" />
            </swiper-slide>
            <swiper-slide class="swiper-slide">
                <img class="container1-img" src="./assets/logo.png" />
            </swiper-slide>
        </swiper>
    </div>

　　<ul id="myMenu" class="menu-nav">

　　　　<li class="active" @click="changeTab(0)">推薦</li>

　　　　<li @click="changeTab(1)">軟件</li>

　　</ul>

<div class="swiper-container swiper-container2">
        <swiper class="swiper-wrapper" :options="swiperOptions" ref="mySwiper">
            <swiper-slide class="swiper-slide section">
                <div class="content-slide">
                    <div class="section-list">
                        <header>下載最多</header>
                        <div class="list">
                            <div class="list-img">
                                <img src="./assets/logo.png" />
                            </div>
                            <div class="list-desc">
                                <p class="title">淘寶</p>
                                <div class="star" v-if="num == 5">
                                    <span class="light"></span>
                                    <span class="light"></span>
                                    <span class="light"></span>
                                    <span class="light"></span>
                                    <span class="light"></span>
                                    <span class="size">54.13MB</span>
                                </div>
                                <div class="star" v-if="num == 4">
                                    <span class="light"></span>
                                    <span class="light"></span>
                                    <span class="light"></span>
                                    <span class="light"></span>
                                    <span class="dark"></span>
                                    <span class="size">54.13MB</span>
                                </div>
                                <p class="desc">新人領388元購物禮包</p>
                            </div>
                            <div class="list-download">
                                <a href="">下載</a>
                            </div>
                        </div>
                    </div>
                </div>
            </swiper-slide>
            <swiper-slide class="swiper-slide section">
              <div class="content-slide">
                <div class="section-list">
                  <header>本周最熱</header>
                  <div class="list">
                      <div class="list-img">
                          <img src="./assets/logo.png" />
                      </div>
                      <div class="list-desc">
                          <p class="title">淘寶</p>
                          <div class="star">
                              <span class="light"></span>
                              <span class="light"></span>
                              <span class="light"></span>
                              <span class="light"></span>
                              <span class="dark"></span>
                              <span class="size">54.13MB</span>
                          </div>
                          <p class="desc">新人領388元購物禮包</p>
                      </div>
                      <div class="list-download">
                          <a href="">下載</a>
                      </div>
                  </div>
                </div>
              </div>
            </swiper-slide>
        </swiper>
    </div>

4、配置options選項

export default {
  name: 'App',
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      num: 5,
      bannerOptions: {
        speed: 300,
        autoplay: true
      },
      swiperOptions: {
        notNextTick: true,
        autoHeight: true
      }
    }
  }
}

5、實現左右滑動分別對應推薦和軟件兩個tab顯示，則首先要拿到swiper這個對象

computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },

第一步：推薦和軟件tab的點擊使swiper區域滑動

methods: {
    changeTab(i) {
      let ul = document.getElementById('myMenu');
      let li = ul.getElementsByTagName('li');
      for (let index = 0; index < li.length; index++) {             
          li[index].className = ''
      }
      li[i].className = 'active'
      this.swiper.slideTo(i,500,false)
    },
}

第二步：左右滑動使tab樣式改變

swiperOptions: {
        notNextTick: true,
        autoHeight: true,
        on: {
          slideChangeTransitionEnd(){
            console.log(this.activeIndex)
            let i = this.activeIndex;
            let ul = document.getElementById('myMenu');
            let li = ul.getElementsByTagName('li');
            for (let index = 0; index < li.length; index++) {             
                li[index].className = ''
            }
            li[i].className = 'active'
          }
        }
      }

6、綜述

以上就可以實現我想要的效果。我所配置的選項比較少，如果你需要多項選項配置，可以去看swiper中文網，里面有更詳細的配置。