this.$toast.clear();
this.isLoading = false; //下拉刷新请求完成
this.loading = false; //上拉加载更多请求完成
})
},
2.2、预加载图片，存储图片高度
获取数据后，遍历数据数组，预加载图片，计算图片缩放后的高度，存储起来。同时由于图片加载是异步加载，所以用变量计数，当最后一个图片加载完成后，开始渲染页面。
loadImagesHeight(list){
var count = 0; //用来计数，表示是否所有图片高度已经获取
list.forEach((item, index)=>{
//创建图片对象，加载图片，计算图片高度
var img = new Image();
img.src = item.cover;
img.onload = img.onerror = (e)=>{
count++;
if (e.type == 'load'){ //图片加载成功
//计算图片缩放后的高度：图片原高度/原宽度 = 缩放后高度/缩放后宽度
list[index].imgHeight = Math.round(img.height * this.boxWidth / img.width);
// console.log('index: ', index, ', load suc, imgHeiht: ', list[index].imgHeight);
}
else{ //图片加载失败，给一个默认高度50
list[index].imgHeight = 50;
console.log("index： ", index, "， 加载报错：", e);
} //加载完成最后一个图片高度，开始下一步数据处理
if (count == list.length){
this.resolveDataList(list);
}
}
})
},
2.3、渲染页面，设置绝对定位
所有图片通过预加载获取图片高度后，开始渲染页面。然后遍历所有图片所在盒子标签，获取盒子高度，设置每个盒子的绝对定位。
resolveDataList(list){ //处理数据
//下拉刷新，清空原数据
if (this.pageIndex <= 1){
this.itemCount = 0;
this.dataList = [];
this.lastRowHeights = [0, 0]; //存储每列的最后一行高度清0
}
if (list.length >= this.pageSize){
this.pageIndex++; //还有下一页
}
else{
this.finished = true; //当前tab类型下所有数据已经加载完成
}
//合并新老两个数组数据
this.dataList = [...this.dataList, ...list];
//判断页面是否有数据
this.haveData = this.dataList.length > 0 ? 2 : 1;
this.isLoading = false; //下拉刷新请求完成
this.loading = false; //上拉加载更多请求完成
console.log("...datalist: ", this.dataList);
console.log("...this.isLoading: ", this.isLoading)
this.$nextTick(()=>{
setTimeout(()=>{
//渲染完成，计算每个item宽高，设置标签坐标定位
this.setItemElementPosition();
this.isLoading = false; //下拉刷新请求完成
this.loading = false; //上拉加载更多请求完成
}, 1000)
});
},
//获取每个item标签高度，设置item的定位
