vue项目中使用swiper实现无缝滚动

为何要使用vue-awesome-swiper

最近在公司写活动页面时，要求将奖品进行轮播无缝滚动，在这里本人想到了有关vue的一个轮播组件vue-awesome-swiper。

使用过程中遇到的问题

在使用的过程中，发现不管怎么设置swiperOption的speed和autoplay.delay参数，轮播出的效果总是会有停顿感，不能真正的实现无缝的滚动。

HTML代码部分

Script部分

需要注意的地方

注意swiper的API版本4.0与3.0有部分区别

定位问题

因为swiper默认样式的移动效果是

分析问题

在这里我找到w3c有关transition-timing-function属性的介绍==点击查看

解决方案

于是我们只需要简单的在我们的css样式里设置一下

.swiper-wrapper{
    transition-timing-function:linear !important;
}

就能解决问题

可能遇到问题

如果在css里设置了，导致修改样式不生效

<style lang='scss' scoped>

解决方案

父级标签 /deep/ .swiper-wrapper{
     transition-timing-function:linear !important;
 } //设置/deep/  就可以无需去掉scoped

最后总结

这是本人在编程生涯里的第一篇文章，记录自己开发过程中遇到的一些问题。希望对大家和自己都有所帮助！