关于swiper的一点使用心得

一、3.0版本

1.使用swiper渲染动态数据

可以使用swiper的

observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: true, //修改swiper的父元素时，自动初始化swiper
两个属性，或者延时计时器来设置；

2.Vue引入报错

可以通过删除最外层.babelrc中的

"plugins": ["transform-runtime"],
//为
"plugins": [],

解除报错

3.使用基本的轮播图

//html部分
  <div class="home-swiper topbox">
    <div class="swiper-wrapper">
      <div v-for="silderImg in silderImgList" class="swiper-slide">
        <!-- <a href="javascript:;" @click="toSilderDetail(silderImg.jumpUrl)"><img v-lazy="silderImg.imgUrl"></a> -->
        <a href="javascript:;" @click="toSilderDetail(silderImg.jumpUrl)"><img :src="silderImg.imgUrl"></a>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

//js部分
  this.topSliderObj = new Swiper('.home-swiper', {
    autoplay: 3000,
    loop: true,
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, //修改swiper的父元素时，自动初始化swiper
    autoplayDisableOnInteraction: false, //滑动停止自动播放
    slidesPerView: 'auto',
    loopedSlides: 7,
    pagination: '.swiper-pagination',
    onTouchEnd: function(swiper,even){
      even.stopPropagation();
    },
  });
},

二、4.0版本

1.基本使用

var swipers = new swiper.Swiper('#img-swipers', {
  // slidesPerView: 1,
  spaceBetween: 30,
  autoplay: {
    delay: 5000,//和3.0版本不同
  },
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
});

2.分页器不动

同一页面如果实例化两个swiper的实例，选取的dom元素必须不同，否则会出现分页器不动的bug

3.手动切换之后自动轮播消失

//此处注意3.0版本和4.0版本回调事件的写法有变化

//4.0
on: {
    // 切换开始
    slideChangeTransitionStart: function () {
      this.autoplay.stop();
    },
    slideChangeTransitionEnd: function () {
      this.autoplay.start();
    },
}
//3.0
onTouchStart: function(swiper,even){
    alert('事件触发了;');
}

三、注意点

看api文档的时候一定要注意自己看和用的的版本一定要统一，在很多地方3.0和4.0还是有很多区别的，别问我问什么这么说？[哭]