Vue中利用swiper实现自动轮播功能
前端工作中轮播图是必不可少的，最近一个项目需要在vue项目中插入轮播图，很多条数据显示n个，自动向上滚动，无缝连接，以前用过很多次swiper轮播插件，所以立马上手，以为手到擒来，结果。。。
异步获取数据后初始化swiper
new Vue({
el: "#networkWarningCounts",
data: {
items: [],
mySwiper: null
},
mounted: function () {
this.getList();
},
methods: {
getList: function () {
var that = this;
$.ajax({
url: "http://39.104.99.77:8080/brand/selectList",
type: 'get',
dataType: 'json',
success: function (data) {
console.log(data);
that.items = data.data;
that.$nextTick(function () {
that.initSwiper();
})
}
});
},
initSwiper: function () {
var that = this;
this.mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
loop: true,
slidesPerView: 5,
spaceBetween: 0,
observer: true, //修改swiper自己或子元素时，自动初始化swiper
observeParents: false,
paginationClickable: true,
autoplay: 1000,
})
}
}
})
注意：autoplay
Swiper3和Swiper4的区别，如果在4中autoplay:true,3中需要设置具体的时间毫秒
提示：看api要看相对应版本的，以免出错