移动端vue-awesome-swiper的使用

1.下载依赖

cnpm inatall vue-awesome-swiper

2.main.js

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

 3.Demo

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
  .awesomeSwiper {
    padding: 14px;
    .successNav {
      .swiper-item {
        height: 120px;
        width: 235px;
        background: rgba(27, 16, 146, 1);
        border: 1px solid #1c0f8b;
        border-radius: 5px;
        text-align: center;
        .imageDisplay {
          margin: 0 auto;
          height: 120px;
          object-fit: cover;
          border-radius: 5px;
        }
      }
    }
  }
</style>
<style>
  .successNav .swiper-slide.swiper-slide-active img {
    background: rgba(0, 0, 0, 1);
  }
  .successNav .swiper-slide.swiper-slide-duplicate-prev img,
  .successNav .swiper-slide.swiper-slide-next img,
  .successNav .swiper-container-3d .swiper-slide-shadow-right,
  .successNav .swiper-container-3d .swiper-slide-shadow-left,
  .successNav .swiper-slide.swiper-slide-prev img,
  .successNav .swiper-slide.swiper-slide-prev {
    border-radius: 5px !important;
    background: #000;
  }
  .successNav .swiper-slide.swiper-slide-prev .swiper-item,
  .successNav .swiper-slide.swiper-slide-next .swiper-item {
    border-radius: 5px !important;
    background: #000;
    opacity: 0.7;
  }
</style>
<template>
  <div class="awesomeSwiper">
    <div class="successNav">
      <swiper :options="swipersuccess"
              ref="mySwiper">
        <swiper-slide v-for="(item,index) in slides"
                      :key="index">
          <div class="swiper-item">
            <img :src="item.src"
                 class="imageDisplay">
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
  import closeLoading from '../../mixins/closeLoading'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: 'awesomeSwiper',
    components: {
      swiper,
      swiperSlide
    },
    mixins: [closeLoading],
    data() {
      return {
        swipersuccess: {
          width: 225,//整个图片的大小
          effect: 'coverflow',
          grabCursor: true,
          centeredSlides: true,
          slidesPerView: '2',
          autoplay: {
            delay: 1500,
            disableOnInteraction: false,
            autoplayDisableOnInteraction: false,
            reverseDirection: true,//反方向切换
          },
          loop: true,
          loopAdditionalSlides: 5,
          spaceBetween: 0,
          coverflowEffect: {
            rotate: 10,
            stretch: 5,//每个幻灯片的距离
            depth: 150,//放大比例
            modifier: 2,//每个幻灯片的距离
            slideShadows: false
          },
          on: {
            click: () => {
              this.showBigImg();
            },
          },
        },
        slides: [
          // { id: '1', src: 'https://www.yihuisoft.com/appImage/502/a200c747-edf4-45a6-8525-1afcf84da8fa.jpg' },
          // { id: '2', src: 'https://www.yihuisoft.com/appImage/162/469ddd6c-e3cb-457c-8863-f46cb7be2a98.jpg' },
          // { id: '3', src: 'https://www.yihuisoft.com/appImage/501/59e82f48-d1b4-466c-b804-491bd83b33f7.jpg' },
          { id: '1', src: 'https://s10.mogucdn.com/mlcdn/c45406/190909_39ebb23kl541d368jj5eb1eadge05_1125x390.jpg' },
          { id: '2', src: 'https://s10.mogucdn.com/mlcdn/c45406/190909_7c5d93c9gkejj24ihlhibih16bkf9_1125x390.jpg' },
          { id: '3', src: 'https://s10.mogucdn.com/mlcdn/c45406/190909_39ebb23kl541d368jj5eb1eadge05_1125x390.jpg' },
        ],
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    methods: {
      showBigImg() {
        console.log(this.$refs.mySwiper.swiper.realIndex);
      }
    },
    mounted() {
    },
    updated() {
      if (this.slides.length > 1) {
        this.swiper.init();
      }
    },
  }
</script>