vue-awesome-swiper滚动插件

• 安装npm install vue-awesome-swiper --save

• import "swiper/dist/css/swiper.css";
  import { swiper, swiperSlide } from "vue-awesome-swiper";
  //局部引入
  

  
  <swiper :options="swiperOption">
  　　<swiper-slide> slide1 </swiper-slide>
  　　<swiper-slide> slide2 </swiper-slide>
  　　<swiper-slide> slide3 </swiper-slide>
  　　<swiper-slide> slide4 </swiper-slide>
  　　<swiper-slide> slide5 </swiper-slide>
  　　<swiper-slide> slide6 </swiper-slide>
  

//swiper包裹swiper-slide,那么这些slide就可以滑动了 ```

• //如果滑动的内容是for循环出来的怎么来处理
  <swiper :options="swiperOption">
          <ul v-for="(item,index) in servCostInfos" :key="index" class="swiper-slide">
            <li>{{item}}</li>
          </ul>
        </swiper>
  //很简单，swiper包裹要滑动的内容，然后在滑动的内容的父级标签（也就是for循环所在的标签）添加 class="swiper-slide"就OK了。
  

• //接着还需要设置滚动的参数
  data() {
      return {
          swiperOption: {
             direction: "vertical", //设置垂直滚动方向
             loop: false,//循环滚动
             slidesPerView: 4,
             height: 180,
             keyboard: true,
             mousewheel: true,
             scrollbar: true,
             navigation: false,
             pagination: false,
             observer: true,
             observeParents: false,
             autoplay: {
               disableOnInteraction: false
             },
             speed: 1000,//滚动速度
             centeredSlides: true 
           }
      }
  }
  

• //最后，在components里注册就OK
  components: {
      swiper,
      swiperSlide
    },
  

• 这样就可以让包裹的内容按照自己设置的参数滑动了。