swiper的简单封装

封装之前首先去官网下载相应的css文件 然后引入

<link rel="stylesheet" href="css/swiper-bundle.css">

示例代码乳如下 图片自己可改为自己的
css部分

<link rel="stylesheet" href="css/swiper-bundle.css">
  <style>
    .swiper {
      width: 600px;
      height: 375px;
    }

    img {
      width: 100%;
    }
  </style>

body部分

 <div id="app">
    <swiper></swiper>
  </div>

  <template id="swiper" :key="list.length">
    <div class="swiper">
      <div class="swiper-wrapper">
        <swiper-slide v-for="item in list" :key="item">
          <img :src="item" alt="">
        </swiper-slide>
      </div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </template>

  <template id="swiper-slide">
    <div class="swiper-slide">
      <slot></slot>
    </div>
  </template>

js部分

 <script src="vue.js"></script>
  <script src="js/swiper-bundle.js"></script>
  <script>

    let vm = new Vue({
      el: "#app",
      
      components: {
        swiper: {
          template: '#swiper',
          data() {
            return {
              // list:["./img/1.jpg","./img/2.jpg","./img/3.jpg"]
              list: []
            }
          },
          mounted() {
            setTimeout(() => {
              //获取数据
              this.list = ["./img/1.jpg", "./img/2.jpg", "./img/3.jpg"];
            //   this.$nextTick(() => {
            //     //获取数据后，对swiper初始化。
            //     new Swiper('.swiper', {
            //       loop: true, // 循环模式选项
            //       // 如果需要前进后退按钮
            //       navigation: {
            //         nextEl: '.swiper-button-next',
            //         prevEl: '.swiper-button-prev',
            //       }
            //     })
            //   });

            }, 1000)
          },
          updated(){
                 //获取数据后，对swiper初始化。
                 new Swiper('.swiper', {
                  loop: true, // 循环模式选项
                  // 如果需要前进后退按钮
                  navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                  }
                })
          },
          components: {
            "swiper-slide": {
              template: "#swiper-slide"
            }
          }
        }
      },
    })
  </script>