vue 移动端中使用 vue-awesome-swiper 插件实现异形轮播

效果图如下，（图片来源于百度图片）

安装依赖版本 （注意）

• 尽量指定 swiper 的版本安装，太高的版本可能会出现部分配置项失效

npm install [email protected] -S
npm install [email protected] -S

代码如下

<template>
  <div class="my-container">
    <div class="banner-box-swiper">
      <!-- 这里一定要加 (v-if="carouselList.length > 0") 判断 否则 loop 循环就会失效 （使用静态轮播图数据不会出现这种情况）
      原因：动态获取轮播图数据，数据还没拿到，dom已经加载完成，所以loop会失效
       -->
      <swiper
        v-if="carouselList.length > 0"
        :options="swiperOption"
        ref="mySwiper"
        style="height: 180px"
      >
        <swiper-slide
          class="swiper-slide"
          v-for="item in carouselList"
          :key="item.id"
        >
          <a :href="item.redirectUrl"><img :src="item.imgUrl" alt="" /></a>
        </swiper-slide>
      </swiper>
    </div>
    <div class="indicators">
      <div
        :class="'item ' + (carouselIndex == index ? 'active' : '')"
        v-for="(_, index) in carouselList.length"
        :key="index"
      ></div>
    </div>
  </div>
</template>
<script>
import {
    
     swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
let vm = null
export default {
    
    
  components: {
    
    
    swiper,
    swiperSlide
  },
  data() {
    
    
    return {
    
    
      carouselList: [],
      defaultRotationList: [
        {
    
     id: 1, imgUrl: 'https://img2.baidu.com/it/u=3408622698,1073639699&fm=26&fmt=auto' },
        {
    
     id: 2, imgUrl: 'https://img1.baidu.com/it/u=3246628741,3439955235&fm=26&fmt=auto' },
        {
    
     id: 3, imgUrl: 'https://img1.baidu.com/it/u=3156083143,133333824&fm=26&fmt=auto' }
      ],
      active: 0,
      carouselIndex: 0,
      // 异形轮播图配置
      swiperOption: {
    
    
        effect: 'coverflow',
        coverflowEffect: {
    
    
          rotate: 0, // slide做3d旋转时Y轴的旋转角度 (默认50).
          stretch: -30, // 每个slide之间的拉伸值 越大slide靠得越紧.
          depth: 100, // slide的位置深度 值越大z轴距离越远 看起来越小.
          modifier: 1, // depth和rotate和stretch的倍率 相当于(depth*modifier、rotate*modifier、stretch*modifier) 值越大这三个参数的效果越明显(默认1).
          slideShadows: false // 开启slide阴影 (默认 true)
        },
        // 默认选中中间一张
        centeredSlides: true,
        // 无限循环
        loop: true,
        // 自动轮播
        autoplay: {
    
    
          delay: 1500,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        slideToClickedSlide: true,
        on: {
    
    
          slideChange: function () {
    
    
            console.log(this.realIndex)
            vm.carouselIndex = this.realIndex
          }
        }
      }
    }
  },
  created() {
    
    
    vm = this
  },
  computed: {
    
    
    swiper() {
    
    
      return this.$refs.mySwiper.swiper
    }
  },
  mounted() {
    
    
    this.getCarouselList()
  },
  methods: {
    
    
    // 轮播图
    getCarouselList() {
    
    
      // 这里调接口拿轮播图数据 我这里展示的是默认的
      this.carouselList = this.defaultRotationList
    }
  }
}
</script>
<style lang="less" scoped>
.my-container {
    
    
  height: 100vh;
  width: 375px;
  padding-top: 12px;
  box-sizing: border-box;
  .banner-box-swiper {
    
    
    width: 100%;
    height: 180px;
    overflow: hidden;
    .swiper-container {
    
    
      height: 280px;
      width: 290px;
      overflow: visible;
      .swiper-slide {
    
    
        text-align: center;
        background: #fff;
        transition: 300ms;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        a {
    
    
          width: 100%;
          height: 100%;
          display: block;
          box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.21);
          border-radius: 10px;
          overflow: hidden;
          img {
    
    
            width: 100%;
            height: 100%;
            display: block;
          }
        }
      }
    }
  }
  .indicators {
    
    
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 0;
    .item {
    
    
      width: 18px;
      height: 3px;
      border-radius: 2px;
      margin-left: 10px;
      background: #d9d9d9;
      &.active {
    
    
        background: #ff8008;
      }
    }
  }
}
</style>