使用vue-awesome-swiper制作H5动画页面

一、引入swiper

整个H5页面是嵌套在vue项目里面，所以要引入npm install vue-awesome-swiper --save;

// 下载依赖包
npm install vue-awesome-swiper --save

在根组件main.js中

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// swiper的css
import 'swiper/dist/css/swiper.css'

// 注册全局
Vue.use(VueAwesomeSwiper, /* { default global options } */)

在具体的vue页面中

// swiper的css
import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  }
}

二、官方代码示例

<template>
  <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <!-- slides -->
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <swiper-slide>I'm Slide 5</swiper-slide>
    <swiper-slide>I'm Slide 6</swiper-slide>
    <swiper-slide>I'm Slide 7</swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
          // some swiper options/callbacks
          // 所有的参数同 swiper 官方 api 参数
          // ...
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      console.log('this is current swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
  }
</script>

三、H5动画需求

现在有个需求：当手指滑动翻页后重新加载动画

// <template>中的html
<swiper-slide>
    <div id="change_1" class="title_1"></div>
</swiper-slide>


// <script>中data里面的数据
data() {
  return {
    swiperOption: {
        direction: 'vertical', // 垂直方向滑动
        // 这里我vue下的swiper是4.0的，可是4.0的API我用不了，只能用swiper3.0的API了！这个API表示当有屏幕滑动的会触发某个事件。
        // swiper.activeIndex表示当前处于哪个页面的index，它是swiper自身提供的对象
        // 我的做法：是当有手指滑动时来判断swiper.activeIndex，根据它来改变div的类名，改变类名就能重新			调用动画了
        onTouchMove(swiper) {
            if (swiper.activeIndex == 0) {
                // 获取div的id，replace表示如果有title_1就删除并添加title_1_am
               document.getElementById('change_1').classList.replace("title_1", 					   "title_1_am");
            }else if (swiper.activeIndex == 1) {
                document.getElementById('change_1').classList.replace("title_1_am", 					"title_1");
            }
        }
    }
  }
}

// <style>中的css样式
.title_1 {
    animation: mychange01 4s ease 0s 1 normal;
}
@keyframes mychange01 {
      0% {
        opacity: 0;
        left: 50px;
      }
      100% {
        opacity: 1;
        left: 50px;
      }
}
.title_1_am {
    animation: mychange011 4s ease 0s 1 normal;
}
@keyframes mychange011 {
      0% {
        opacity: 0;
        left: 50px;
      }
      100% {
        opacity: 1;
        left: 50px;
      }
}

四、小结

因为是第一次写H5页面，没什么经验，所以可能用了最笨的方法，但是最起码功能实现了！上面代码两个动画是一模一样的只是名称不一样，如果有大佬有更好的做法欢迎留言我会及时回复并学习！