vue2版本中使用[email protected]实现数据展示

1：安装插件

npm i  [email protected] --save

2：注意事项

注意：我安装的是，2.6.7低版本的，只适用于此版本

如果遇到问题，可从github上寻找答案。下面链接是针对此版本的使用介绍

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

如果您遇到了其他问题，可以先到此路径下的issue中进行寻找答案。

3：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：效果展示

5：功能介绍：

改demo 可以支持点击下方按钮进行页面数据切换展示 以及 可以根据鼠标滑动来进行切换数据展示