vue使用Swiper

swiper这个插件非常强大，可以支持在移动端手动滑动。

本人最近在做自己的博客网站，所以有用到它。

（1）首先，你要使用cnpm安装它

cnpm install swiper --save

（2）接下来在需要用到它的地方引入它，在你要用它的组件中把它导入。

 

 

（3）导入后你要初始化它，正常的html初始化，你可以参考它的中文网站，它有说明。

你需要定义一个函数，然后在页面被创建时，或者渲染时使用，或者说初始化他。

你可以在methods里面定义初始化函数：

 

 

 （4）在created或者mounted中使用他

 

 

 下面是我利用swiper做的二次封装的代码

    <template>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">slider1</div>
          <div class="swiper-slide">slider2</div>
          <div class="swiper-slide">slider3</div>
        </div>
      </div>
    </template>
    <script>
      import Swiper from "swiper";
      export default {
        name: 'mySwiper',
        methods: {
          //初始化swiper
          initMySwiper() {
            var MySwiper = new Swiper('.swiper-container', {
            direction:"horizontal",/*横向滑动*/ 
            //形成环路（即：可以从最后一张图跳转到第一张图 
　　　　 　　loop:true,
　　　　　　 pagination:".swiper-pagination",/*分页器*/ 
            autoplay:true


            // autoplay: {
              //   delay: 3000,
              //   stopOnLastSlide: false,
              //   disableOnInteraction: true,
              // }
            })
          }
        },
        mounted() {
          // 调用初始化swiper
          this.initMySwiper();
        },
      }
    </script>
    <style>
    /* 哪里使用swiper，哪里导入它 */
    .swiper-container{
      height: 200px;
      width: 600px;
    }
    .swiper-slide{
      background-color: orange;
    }
    </style>