vue+antdsign 使用vue-awesome-swiper的coverflow效果笔记

项目中需要轮播展示固定图片，且轮播效果为中间大，两边延展变小的效果，如下图：

 查阅发现swiper中的“3D滚动切换”较为符合，即coverflow/coverflowEffect效果

1、安装

项目使用的vue-awesome-swiper版本为3.1.3，vue-awesome-swiper还需要搭配swiper使用，swiper的版本依据vue-awesome-swiper依赖中swiper.vue的注释来引入

 即package.json中：

 2.引入

本项目使用的是全局引入，main.js代码：

 3、使用

html：

        <div style="width: 100%; height: 500px; display: flex; flex-direction: row; justify-content: center;">
          <swiper v-if="imgList && imgList.length > 0"
            :options="swiperOption"
            @swiper="onSwiper"
            @slideChange="onSlideChange"
            ref="mySwiper">
            <swiper-slide v-for="(item, index) in imgList" :key="index">
              <img style="width: 100%;height: 400px" :src="item.imageLink" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>

其他代码：

<script>

export default {
  name: "portExhibitionHall",
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
  data() {
    return {
      imgList: [],
      index: 1,
      swiperOption: {
        effect : 'coverflow',
        loop: true,
        // 自动轮播控制
        autoplay: {
          delay: 2000, // //自动切换的时间间隔，单位ms
          stopOnLastSlide: false, //当切换到最后一个slide时是否停止自动切换
          disableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay。
        },
        slidesPerView: 3, // 一次展示多少个
        centeredSlides: true, // 居中显示正在展示的slide
        // 设置分页器
        pagination: {
          el: '.swiper-pagination',
          // 设置点击可切换
          clickable: true
        },
        coverflowEffect: {
          rotate: -15, //slide做3d旋转时Y轴的旋转角度。默认50。
          stretch: 8, //每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
          depth: 70, //slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
          modifier: 2, //depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
          slideShadows : false, //开启slide阴影。默认 true。
        }
      }
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.imgList = [];
      // 调后台接口，查询图片信息，当前项目返回的数据形式为[{imageLink: 'http://....'}, ...]
      // 将  [{imageLink: 'http://....'}, ...]  赋值给this.imgList
    },
  }
}
</script>

<style>
/*swiper样式*/
.swiper-container {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}
.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 300px;

}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    border-radius: unset;
}
.swiper-pagination-bullet-active {
    background: #c92d20!important;
}
</style>

注意：

1）swiper的样式要设置为全局，即<style>标签中不可有scope；

2）由于需调用后端接口返回数据，与swiper的渲染存在异步，会导致接口已经返回图片信息，但是页面上没有渲染出图片的问题，所以<swiper>标签添加v-if，控制swiper渲染的时机