Vue中利用swiper实现自动轮播功能
前端工作中轮播图是必不可少的,最近一个项目需要在vue项目中插入轮播图,很多条数据显示n个,自动向上滚动,无缝连接,以前用过很多次swiper轮播" title="swiper轮播">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要看相对应版本的,以免出错
以上是 Vue中利用swiper实现自动轮播功能 的全部内容, 来源链接: utcz.com/z/377524.html