vue-awesome-swiper整理

使用

引入

• import { swiper, swiperSlide } from "vue-awesome-swiper";
• import "swiper/dist/css/swiper.css"; //直接影响滑动样式

<swiper
        v-show="contractList.length"
        class="swiper-content-boss swiper-container"
        :options="swiperOption"
        ref="mySwiper"
        @slideChange="change"
      >
        <swiper-slide v-for="(item,index) of contractList" :key="index">
          <img v-if="item.totalOverduePeriod > '0'" src="./../assets/img/red@2x.png" alt />
          <img v-else src="./../assets/img/blue@2x.png" alt />
          <div class="card-content">
            <div class="card-next">下次还款日{{item.receivableDate}}
              <div v-if="item.totalOverduePeriod > '0'">
                距离下次还款日还有
                <span>{{0 > detailList.remainReceivableDays ? '0' : detailList.remainReceivableDays}}</span>天
              </div>
            </div>
            <div @click="gotoNewPage(2)">还款记录></div>
            <div>本期应还总额(元)</div>
            <div>¥{{toMoney(Number(item.receivableAmount))}}</div>
          </div>
        </swiper-slide>
      </swiper>

components: {
    swiper,
    swiperSlide,
  },

在data中设置swiper的参数，具体参见api：
vue-awesome-swiper官网API

data() {
    return {
      swiperOption: {
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: "auto",
        coverflowEffect: {
          rotate: 0,
          stretch: -30,
          depth: 400,
          modifier: 0.5,
          slideShadows: false
        },
        observer: true,
        loop: true, //轮播
        pagination: {
          el: ".swiper-pagination"
        },
        num: {
          itemNum: 0,
          allNum: 0
        },
        bannerIndex: ""
      },
      swiperIndex: 0,  //当前展示第几个滑动卡片，默认设置0
    };
  mounted() {
    this.$refs.mySwiper.swiper.slideTo(0); // 默认显示第一个卡片
  },

swiper的回调函数，通过this.$refs.mySwiper.swiper.activeIndex获取当前的卡片位置：

change() {
  this.swiperIndex = this.$refs.mySwiper.swiper.activeIndex;
}

此时的样式：

加切换箭头

在<swiper-slide>下方添加div，swiper-button-prev表示向左箭头，swiper-button-white表示箭头颜色是白色。

<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>

在data的swiperOption下添加配置：

navigation: {
   nextEl: ".swiper-button-next",
   prevEl: ".swiper-button-prev"
},

大功告成