这个问题，真的，找了好久解决方案，终于解决成功了，
首先问题描述，
本来是用的静态数据，swiper渲染没有问题，
items: [
{url: '111',name:'name1'},
{url: '222',name:'name2'},
{url: '333',name:'name3'},
{url: '444',name:'name4'},
{url: '555',name:'name5'},
{url: '666',name:'name6'},
{url: '777',name:'name7'},
{url: '888',name:'name8'},
{url: '999',name:'name9'},
{url: '000',name:'name10'}
],
后期，动态获取数据：
getDeviceList () {
getList({}).then((res) => { // 获取所有设备
this.items = res.data;
}).catch((err) => {
console.error(err);
});
},
const itemsLength = this.items.length;
for (let i = 0; i < itemsLength; i += 4) { //四画面轮播
this.pages.push(this.items.slice(i, i + 4));
}
发现this.pages始终获取不到this.items的值，swiper渲染不到任何数据，
后来经同事指导，同事说因为数据请求时异步，因此，for循环应该放在getList方法体中：
getDeviceList () {
getList({}).then((res) => { // 获取所有设备
this.items = res.data;
const itemsLength = this.items.length;
for (let i = 0; i < itemsLength; i += 4) { //四画面轮播
this.pages.push(this.items.slice(i, i + 4));
}
).catch((err) => {
console.error(err);
});
},
这样之后swiper可以渲染数据了，但是我又发现，画面不轮播了，并且也拖不动，四处寻找答案，大致分以下两种方法：
1.在获取数据之后立即对swiper初始化：
getDeviceList () {
getList({}).then((res) => { // 获取所有设备
this.items = res.data;
const itemsLength = this.items.length;
for (let i = 0; i < itemsLength; i += 4) { //四画面轮播
this.pages.push(this.items.slice(i, i + 4));
}
let mySwiper = new Swiper('.swiper-container', {
autoplay: {
delay: 5000, // 5秒切换一次
},
loop: true, //循环
allowTouchMove: false, // 不允许鼠标拖动
preventClicks: false,//默认true
});
}).catch((err) => {
console.error(err);
});
},
2.在初始化swiper的时候加上以下两行代码：
let mySwiper = new Swiper('.swiper-container', {
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
});
亲测，第一种方法反正还是不可以滑动，第二种方法可以滑动，但是切换的时候第一条数据不显示，不知道为什么，
后来参考这个博客完美解决：
https://blog.csdn.net/zhanghuiqi205/article/details/79662586
贴上代码：
methods: {
carousel () { // swiper
let mySwiper = new Swiper('.swiper-container', {
autoplay: {
delay: 5000, // 5秒切换一次
},
loop: true, //循环
allowTouchMove: false, // 不允许鼠标拖动
preventClicks: false,//默认true
autoplayDisableOnInteraction: false,
});
//鼠标覆盖停止自动切换
mySwiper.el.onmouseover = function () {
mySwiper.autoplay.stop();
};
//鼠标移开开始自动切换
mySwiper.el.onmouseout = function () {
mySwiper.autoplay.start();
};
},
getDeviceList () {
let that = this;
getList({}).then((res) => { // 获取所有设备
this.items = res.data;
const itemsLength = this.items.length;
for (let i = 0; i < itemsLength; i += 4) { //四画面轮播
this.pages.push(this.items.slice(i, i + 4));
}
that.$nextTick(function () {
that.carousel();
})
}).catch((err) => {
console.error(err);
});
}
}
mounted () {
this.$nextTick(function () {
this.getDeviceList();
this.carousel();
})
}
刚刚接触vue，对$nextTick()函数还不了解，日后补上。
