swiper

整一下swiper组件

几乎每一次用swiper都会有一些问题，就很烦

npm i swiper vue-awesome-swiper -S

<div class="wrapper">
       <Swiper  v-if="swiper1.swiperList.length>1" ref="mySwiper" :options="swiperOption" class="swiper-container">
      <SwiperSlide class="swiper-item" v-for="item of swiper1.swiperList" :key="item.id">
        <img :src="item.imgUrl" :style="swiper1.height"/>
      </SwiperSlide>
           //底部。。。
           <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> 
    </Swiper>
  
  </div>

<script>
import { Swiper as SwiperClass, Pagination, Mousewheel, Autoplay, Navigation ,EffectFade,EffectCoverflow} from 'swiper/core'
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'
import 'swiper/swiper-bundle.min.css'
const { Swiper, SwiperSlide } = getAwesomeSwiper(SwiperClass)
SwiperClass.use([Pagination, Mousewheel, Autoplay,Navigation,EffectFade,EffectCoverflow])

export default {
      props:["swiper1"],
 data() {
    return {
      swiperOption: {
        //slidesPerView: 2,//展示几个
        //slidesPerColumn: 2,//行数
        //spaceBetween: 30,//间距
        //effect:'fade',//渐变效果 、"cube" 3d、"coverflow" 百叶窗、"flip" 翻转
        // grabCursor: true,
        // centeredSlides: true,//默认active slide居左，设置为true后居中
        // slidesPerView: 'auto',
        // coverflowEffect: {
        //   rotate: 50,
        //   stretch: 0,
        //   depth: 100,
        //   modifier: 1,
        //   slideShadows: true,
        // },
        pagination: {
            el: '.swiper-pagination'
        },
        // navigation: {//前进后退按钮
        //   nextEl: ".swiper-button-next",
        //   prevEl: ".swiper-button-prev",
        // },
        loop: true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false,
        },
        //滑动速度
        speed: 1000,
      },

    };
  },
  components: {
    Swiper,
    SwiperSlide,
  },
}
</script>

实在不想注释这些参数了，留个网址自己看吧 https://www.swiper.com.cn/api/grid/50.html

//使用的时候
<template>
  <div class="home">
    <Swiper :swiper1="swiper1" />
  </div>
</template>

<script>
import Swiper from "@/components/swiper.vue";
export default {
  name: "Home",
  components: {
    Swiper
  },
  data() {
    return {
      swiper1: {
        swiperList: [
          {
            id: "001",
            imgUrl:
              "http://39.101.203.122:8088/gnj/1.jpg"
          },
          {
            id: "002",
            imgUrl:
              "http://39.101.203.122:8088/gnj/2.jpg"
          },
          {
            id: "003",
            imgUrl:
              "http://39.101.203.122:8088/gnj/3.jpg"
          },
        ],
        height: "1080px;height: 1920px"
      }
    };
  },
  mounted(){
     this.timer = window.setTimeout(() => {
      this.$router.push({ name: "About" });
    }, 300000);
  },
  beforeDestroy() {
    //清除定时器
    clearTimeout(this.timer);
    console.log("beforeDestroy");
  },
};
</script>