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