Swiper 插件使用

官方文档

使用方法

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 'auto',	// 每一页的slide数量自动确定，这样可以做到不用整数个显示
  spaceBetween: 10,	// 每两个slide之间的间隔
  centeredSlides: false,	// 不用从居中开始，否则左边是空白的
  pagination: {
    el: '.swiper-pagination',	// 分页元素位置
    clickable: true,
  },
  scrollbar: {
    el: '.swiper-scrollbar',	// scrollbar的位置
    clickable: true,
    hide: true
  },
  navigation: {			// 指定翻页按钮
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

• Lazy Load Images:

var swiper = new Swiper('.swiper-container', {
  lazy: true,
  lazy: {
    preloaderClass: 'my-preloader'	// 默认lazy=true即可，但如果需要自定义preloader类名需要这样做
  }
})

Troubleshooting

• swiper不能滑动，可以参考https://segmentfault.com/a/1190000013044682，其实可以在watch里面监听props，然后nexttick里面再次渲染