vueJS中wowjs、animate、swiper的使用

news2024/12/24 3:08:30

原文关注公众号

本文演示利用swiper纵向全屏滚动

npm 安装 wow.js，安装 wow.js后animate.css会自动安装；

npm install wowjs --save-dev

npm 安装 animate.css

animate.css文档：http://5kzx.cn/doc.html

npm install animate.css --save

安装 swiper
swiper文档：https://www.swiper.com.cn/usage/index.html

npm install vue-awesome-swiper --save

在main.js中加入

如果要在swiper使用动画需要引入 swiper.animate.min.js，在官网手动下载自行引入。

// 引入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper';
import '@/assets/css/swiper.min.css';
// 引入wow
import "wowjs/css/libs/animate.css";
// 如果此处wowjs/css/libs/animate.css不生效，还需要单独再引入
import 'animate.css';
Vue.use(VueAwesomeSwiper);

源码：


<template>
  <div class="warp">
    <swiper :options="pullSwiperOptions" 
      @transitionStart="onSlideChangeStart"
      @transitionEnd="onSlideChangeEnd"
      @slideChange="onSlideChange"
      ref="fullSwiper">
      <swiper-slide>
        <h1 class="wow animate__animated animate__bounce" data-wow-delay="800ms" data-wow-duration="1.5s">
          <div>第1屏:wowJS滚动动画</div> 
        </h1>
      </swiper-slide>
      <swiper-slide>
        <h1 class="wow animate__animated animate__flip" data-wow-delay="800ms" data-wow-duration="1.5s">
          <div>第2屏:wowJS滚动动画</div> 
        </h1>
      </swiper-slide>
      <swiper-slide>
        <h1 class="wow animate__animated animate__bounceInLeft" data-wow-delay="800ms" data-wow-duration="1.5s">
          第3屏:wowJS滚动动画
        </h1>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import { WOW } from "wowjs";
export default {
  name: "swiperHome",
  components: {},
  data() {
    return {
      // 全屏滚动
      pullSwiperOptions: {
        direction: "vertical",
        slidesPerView: 1,
        spaceBetween: 30,
        slidesPerView: 'auto',
        paginationClickable: true,
        keyboardControl: true,
        mousewheelControl: true,
        mousewheel: true,
        // effect : 'fade',
        // fadeEffect: {
        //   crossFade: true,
        // },
        speed: 1500,
        pagination: {
          el: ".pull-swiper-pagination",
          type: "bullets",
          clickable: true,
          // direction: 'vertical',
        },
        on: {
          slideChange: () => {
            const swiper = this.$refs.fullSwiper.swiper.activeIndex;
            const activeIndex = swiper.activeIndex;
            console.log('当前下标homeSwiperOption：', swiper);

          },
          transitionStart:function(){
            console.log("回调函数transitionStart:",this);

          },
          transitionEnd: (swiper) => {
            console.log("回调函数transitionEnd:",swiper);
          }
        },
      },
    };
  },
  mounted() {

  },
  methods: {
    wowInit(){
      this.$nextTick(() => {
        let wow=new WOW({
         // default
          boxClass: 'wow',
           // default
          animateClass: 'animated',
           /*
           如果html、body元素标签高度设置了100%， 这里的offset
           需要设置为负数，否则页面滚动到了可视区域内容会不显示
           */
          offset: -6000,
           // default
          mobile: true,
          live: false,

          // live为true时，控制台会提示：MutationObserver is not supported by your browser. & WOW.js cannot detect dom mutations, please call .sync() after loading new content.

          callback: function (box) {
            console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
          }
        });
        wow.init();
      });
    },

    onSlideChangeStart(swiper, event){
      console.log("onSlideChangeStart:",);
    },
    onSlideChangeEnd(swiper, event) {
      console.log("回调函数onSlideChangeEnd:",swiper, event);

    },
    onSlideChange(){
      console.log("回调函数onSlideChange:",);
      this.wowInit();
    },
  },
  destroyed() {

  },
};
</script>
<style>
  html,
  body {
    height: 100% !important;
  }
  #app{
    height: calc(100% - 10.4rem);
  }
  .warp,.swiper-container,.swiper-wrapper,.swiper-slide{
    width: 100%;
    height: 100%;

  }
  h1{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 24px;
  }
</style>