Utilice [email protected] en la versión vue2 para realizar la visualización de datos

1: instalar el complemento

npm i  [email protected] --save

2: Precauciones

Nota: instalé una versión inferior de 2.6.7 , que solo se aplica a esta versión.

Si tiene problemas, puede encontrar respuestas en github. El siguiente enlace es la introducción a esta versión.

https://github.com/surmon-china/vue-awesome-swiper/tree/v2.6.7

Si encuentra otros problemas, primero puede ir al problema en esta ruta para encontrar la respuesta.

3: código fuente dmeo

<template>
  <div class="home homeIndex">


    <div class="home_24shi_content">
      <div class="home_24shi_content_t1">
        <div class="home_24shi_content_t1_title">swiper数据切换展示</div>
        <div class="home_24shi_content_t1_library">
          <swiper class="swiper" :options="swiperOption">
            <swiper-slide>Slide 1</swiper-slide>
            <swiper-slide>Slide 2</swiper-slide>
            <swiper-slide>Slide 3</swiper-slide>
            <swiper-slide>Slide 4</swiper-slide>
            <swiper-slide>Slide 5</swiper-slide>
            <swiper-slide>Slide 6</swiper-slide>
            <swiper-slide>Slide 7</swiper-slide>
            <swiper-slide>Slide 8</swiper-slide>
            <swiper-slide>Slide 9</swiper-slide>
            <swiper-slide>Slide 10</swiper-slide>
            <swiper-slide>Slide 11</swiper-slide>
            <swiper-slide>Slide 12</swiper-slide>
            <swiper-slide>Slide 13</swiper-slide>
            <swiper-slide>Slide 15</swiper-slide>
            <swiper-slide>Slide 14</swiper-slide>
            <swiper-slide>Slide 14</swiper-slide>
            <swiper-slide>Slide 14</swiper-slide>
            <swiper-slide>Slide 14</swiper-slide>
          </swiper>
          <div class="swiper-pagination" slot="pagination"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: "HomeView",
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 6,
        slidesPerColumn: 2,
        spaceBetween: 14,
        slidesPerGroup: 6,
        paginationClickable: true,
        loopFillGroupWithBlank: true,
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,//修改swiper的父元素时，自动初始化swiper
        pagination: '.swiper-pagination',
      }
    }
  },
  mounted() {

  },
  methods: {
    onChangeShi(e) {
      this.isActive = e;
    }
  }
};
</script>
<style lang="scss">
.homeIndex {
  .swiper-pagination {
    margin-top: 50px;
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
  }

  .swiper-pagination-bullet {
    width: 52px;
    margin: 0 10px;
    height: 4px;
    background: #867f6f;
    border-radius: 2px;
  }

  .swiper-pagination-bullet-active {
    background: #CEC3A7 !important;
  }
}
</style>
<style lang="scss" scoped>
.homeIndex {
  width: 1200px;
  margin: 0 auto;
}

.swiper {
  margin-bottom: 50px;
  position: relative;
  margin-top: 25px;
  height: 500px;
  margin-left: auto;
  margin-right: auto;

  .swiper-slide {
    height: 237px;
    background: red;
  }
}

.home_24shi_content {
  margin-top: 50px;

  .home_24shi_content_t1 {
    .home_24shi_content_t1_title_t2 {
      font-size: 16px;
      margin-top: 22px;
      color: #6B6B6B;
    }

    .home_24shi_content_t1_title {
      color: #1B1B1B;
      font-weight: 600;
      font-size: 22px;
    }
  }
}

.home_24shi {
  margin-top: 55px;
  display: flex;
  justify-content: center;
  height: 142px;

  .home_24shi_nav {
    cursor: pointer;
    width: 155px;
    // border-left: 1px solid #B39F7B;
    text-align: center;

    &:last-child {
      border-right: 1px solid #B39F7B;
    }

    .active {
      width: 19px;
      height: 19px;
      border-radius: 50%;
      margin: 9px auto;
      background: #B39F7B;
    }

    .home_24shi_nav_p1 {
      width: 52px;
      line-height: 58px;
      text-align: center;
      border-radius: 50%;
      height: 52px;
      font-size: 35px;
      background: #B39F7B;
      color: #FFF;
      margin: 25px auto 10px auto;
    }

    .home_24shi_nav_p2 {
      font-size: 22px;
      color: #837648;
    }
  }
}

.home_h1 {
  margin-top: 45px;
  font-size: 18px;

  .p2 {
    margin-top: 8px;
    color: #6B6B6B;
  }

  .p1 {
    font-weight: 800;
    color: #2E2E2E;
  }
}

.home_title {
  position: relative;

  span {
    position: absolute;
    color: #FFF;
    font-size: 59px;
  }

  .title1 {
    left: 474px;
    top: 35px;
  }

  .title2 {
    left: 569px;
    top: 35px;
  }

  .title3 {
    left: 663px;
    top: 35px;
  }
}
</style>

4: visualización de efectos

5: Introducción a la función:

La demostración modificada puede admitir hacer clic en el botón a continuación para cambiar la visualización de datos de la página y cambiar la visualización de datos según el deslizamiento del mouse.