Vue中利用swiper实现自动轮播功能
前端工作中轮播图是必不可少的，最近一个项目需要在vue项目中插入轮播图，很多条数据显示n个，自动向上滚动，无缝连接，以前用过很多次swiper轮播插件，所以立马上手，以为手到擒来，结果。。。异步获取数据后初始化swipernew Vue({ el: "#networkWarningCounts", data: {
·
前端工作中轮播图是必不可少的，最近一个项目需要在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要看相对应版本的，以免出错
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献7条内容
所有评论(0)