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中文网，里面有更详细的配置。