vue中使用轮播图网格式

1、npm install vue-awesome-swiper --save


2、组件中引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

<template>
  <div class="up_agent">
    <div class="top">
      <div class="banner">
        <swiper :options="grid">
          <swiper-slide><div class="item">1</div></swiper-slide>
          <swiper-slide><div class="item">2</div></swiper-slide>
          <swiper-slide><div class="item">3</div></swiper-slide>
          <swiper-slide><div class="item">4</div></swiper-slide>
          <swiper-slide><div class="item">5</div></swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    let that = this;  //当前vue实例
    return {
      index: 0, //获取当前轮播的索引
      grid: {
        slidesPerView: 1.45,
        spaceBetween: 2,
        centeredSlides: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        on: {  //轮播图切换的时候执行，
          slideChange: function() {
            that.index = this.activeIndex;  //this为轮播图实例
            console.log("改变了，当前索引为" + this.activeIndex);
          }
        }
      }
    };
  },
  mounted() {},
  methods: {
    init() {
      this.axios.post("").then(data => {});
    }
  }
};
</script>
<style lang="less" scoped>
.up_agent {
  background-color: #f8f8fa;
  min-height: 100vh;
  .top {
    width: 100%;
    height: 212px;
    background: #fff url(../../image/my/20.png) no-repeat top left;
    background-size: contain;
    padding-top: 1px;
    .banner {
      width: 100%;
      height: 140px;
      margin-top: 42px;
      .swiper-container {
        width: 100%;
        height: 100%;
      }
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: pink;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 300ms;
        transform: scale(0.88);
        border-radius: 5px;
        overflow: hidden;
      }
      .swiper-slide-active,
      .swiper-slide-duplicate-active {
        transform: scale(1);
        background: rgb(221, 13, 48);
      }
    }
  }
}
</style>