常用---vue-cli中使用頁面切換庫vue-awesome-swiper以及動畫庫animate.css

vue-awesome-swiper以及animate.css使用

      安裝下載：npm install --save vue-awesome-swiper  animate.css

      文件入口main.js中引入：

import vueAwesomeSwiper from 'vue-awesome-swiper'
import animate from 'animate.css'
Vue.use(vueAwesomeSwiper)

    組件中使用： vue-awesome-swiper中文使用手冊              animate.css使用手冊     

             （animate使用在對應動畫元素中添加類名如下：class="animated bounce"）

<template>
  <div class="scroll">
    <swiper :options="swiperOption" ref="mySwiper" class="swiper-wrapper">
      <swiper-slide class="swiper-slide re_item re_first">
        <div class="logo">
          <img class="logoimg" src="../assets/img/fircover.png">
        </div>
        <div class="firtextcon">
          <img src="../assets/img/fircover.png">
        </div>
        <div class="firperson">
          <img class="pertext ani" swiper-animate-effect="bounceIn" src="../assets/img/fircover.png">
          <img class="person animated bounceInDown" src="../assets/img/firwording_cover.png">
        </div>
        <img class="iconup animated bounce" src="../assets/img/icon_up.png">
      </swiper-slide>
      <swiper-slide class="swiper-slide re_item re_second">slider2</swiper-slide>
      <swiper-slide class="swiper-slide re_item re_three">slider3</swiper-slide>
    </swiper>
  </div>
</template>

<script>
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: 'HelloWorld',
    data() {
      return {
        list: [], //輪換列表
        swiperOption: {
          direction: 'vertical', // 垂直切換選項
          height : window.innerHeight,
          height : window.innerHeight,
          width:window.innerWidth
        }
      }
    },
    created(){
      //從後臺獲取數據
      this.list = [0,1,2,3,4,5,6,7,8,9];
    },
    // 如果你需要得到當前的swiper對象來做一些事情，你可以像下面這樣定義一個方法屬性來獲取當前的swiper對象，同時notNextTick必須爲true
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted(){
       this.swiper.slideTo(0,0, false); //手動跳到指定頁
    },
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .re_first{
    background: #9261BF;
    padding-left:0.3rem;
    box-sizing: border-box;
    position: relative;
  }
  .logo{
    width: 100%;
    padding-top: 0.3rem;
  }
  .logoimg{
    width: 1.5rem;
    height:0.5rem;
  }
  .firtextcon{
    width:100%;
    text-align: center;
    margin-top:1rem
  }
  .firtextcon>img{
    width: 80%;
    height:3rem;
  }
  .firperson{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top:1rem
  }
  .pertext{
    width: 60%;
    height:2rem;
  }
  .person{
    margin-left: -0.5rem;
    width: 40%;
    height:6rem;
  }
  .iconup{
    position: absolute;
    bottom:0.5rem;
    left:45%;
    animation-iteration-count:infinite;
  }

</style>