建站
咨詢
售后
建站咨詢
新聞中心
小編給大家分享一下vue如何實(shí)現(xiàn)網(wǎng)絡(luò)圖片瀑布流、下拉刷新、上拉加載更多的功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)建站專注于企業(yè)營(yíng)銷型網(wǎng)站、網(wǎng)站重做改版、彌渡網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁面制作、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為彌渡等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。一、思路分析和效果圖
用vue來實(shí)現(xiàn)一個(gè)瀑布流效果，加載網(wǎng)絡(luò)圖片，同時(shí)有下拉刷新和上拉加載更多功能效果。然后針對(duì)這幾個(gè)效果的實(shí)現(xiàn)，捋下思路：
根據(jù)加載數(shù)據(jù)的順序，依次追加標(biāo)簽展示效果；
選擇哪種方式實(shí)現(xiàn)瀑布流，這里選擇絕對(duì)定位方式；
關(guān)鍵問題：由于每張圖片的寬高不一樣，而瀑布流中要求所有圖片的寬度一致，高度隨寬度等比縮放。而且由于圖片的加載是異步延遲。在不知道圖片高度的情況下，每個(gè)圖片所在的item盒子不好絕對(duì)定位。因此在渲染頁面前先獲取所有圖片的高度，是解決問題的關(guān)鍵點(diǎn)！這里選擇用JS中的Image類，通過預(yù)加載圖片的方式提前獲取圖片寬高，另外通過一個(gè)臨時(shí)變量來計(jì)算是否所有圖片的高度已經(jīng)得到。當(dāng)所有的圖片高度獲取后，開始渲染頁面。
頁面渲染后，獲取所有圖片所在的盒子，循環(huán)計(jì)算盒子的高度，開始設(shè)置每個(gè)盒子item的絕對(duì)定位。
頁面渲染時(shí)，會(huì)出現(xiàn)閃爍的現(xiàn)象。如何解決這個(gè)問題呢？這里用了一個(gè)動(dòng)畫樣式。不過在第一次加載的時(shí)候，還是會(huì)有一點(diǎn)閃爍的感覺。
然后就是下拉刷新和上拉加載更多的效果，這里用了有贊的vant組件PullRefresh和List這套組合組件來實(shí)現(xiàn)。
先看個(gè)效果動(dòng)圖：
靜態(tài)截圖：
二、具體實(shí)現(xiàn)步驟
2.1、頁面結(jié)構(gòu)設(shè)計(jì)，測(cè)試數(shù)據(jù)準(zhǔn)備。
本地準(zhǔn)備一個(gè)json文件數(shù)據(jù)，放在項(xiàng)目public文件夾下。注意，本地測(cè)試數(shù)據(jù)必須放在public文件夾下，網(wǎng)絡(luò)請(qǐng)求時(shí)才能請(qǐng)求到數(shù)據(jù)，這是vue3.x。新增加一個(gè)axios依賴包，用來進(jìn)行網(wǎng)絡(luò)請(qǐng)求。部分截圖，及關(guān)鍵代碼：
//數(shù)據(jù)請(qǐng)求
getDataList(){
this.$axios.get("/json/dataList.json").then((res)=>{
let list = res.data.data ? res.data.data: [];
if (list.length > 0){
//從list中取pageSize條數(shù)據(jù)出來
var tempList = [];
for (let i = 0; i < this.pageSize; i++){
if (list.length > 0){
let tempIndex = parseInt(Math.random() * 1000) % list.length;
tempList.push(list[tempIndex]);
list.splice(tempIndex, 1);
}
}
this.loadImagesHeight(tempList); //模擬預(yù)加載圖片，獲取圖片高度
}
else {
this.loadImagesHeight(list);
}
}).catch((res)=>{
console.log("..fail: ", res);
this.$toast.clear();
this.isLoading = false; //下拉刷新請(qǐng)求完成
this.loading = false; //上拉加載更多請(qǐng)求完成
})
},2.2、預(yù)加載圖片，存儲(chǔ)圖片高度
獲取數(shù)據(jù)后，遍歷數(shù)據(jù)數(shù)組，預(yù)加載圖片，計(jì)算圖片縮放后的高度，存儲(chǔ)起來。同時(shí)由于圖片加載是異步加載，所以用變量計(jì)數(shù)，當(dāng)最后一個(gè)圖片加載完成后，開始渲染頁面。
loadImagesHeight(list){
var count = 0; //用來計(jì)數(shù)，表示是否所有圖片高度已經(jīng)獲取
list.forEach((item, index)=>{
//創(chuàng)建圖片對(duì)象，加載圖片，計(jì)算圖片高度
var img = new Image();
img.src = item.cover;
img.onload = img.onerror = (e)=>{
count++;
if (e.type == 'load'){ //圖片加載成功
//計(jì)算圖片縮放后的高度：圖片原高度/原寬度 = 縮放后高度/縮放后寬度
list[index].imgHeight = Math.round(img.height * this.boxWidth / img.width);
// console.log('index: ', index, ', load suc, imgHeiht: ', list[index].imgHeight);
}
else{ //圖片加載失敗，給一個(gè)默認(rèn)高度50
list[index].imgHeight = 50;
console.log("index： ", index, "， 加載報(bào)錯(cuò)：", e);
}
//加載完成最后一個(gè)圖片高度，開始下一步數(shù)據(jù)處理
if (count == list.length){
this.resolveDataList(list);
}
}
})
},2.3、渲染頁面，設(shè)置絕對(duì)定位
所有圖片通過預(yù)加載獲取圖片高度后，開始渲染頁面。然后遍歷所有圖片所在盒子標(biāo)簽，獲取盒子高度，設(shè)置每個(gè)盒子的絕對(duì)定位。
resolveDataList(list){ //處理數(shù)據(jù)
//下拉刷新，清空原數(shù)據(jù)
if (this.pageIndex <= 1){
this.itemCount = 0;
this.dataList = [];
this.lastRowHeights = [0, 0]; //存儲(chǔ)每列的最后一行高度清0
}
if (list.length >= this.pageSize){
this.pageIndex++; //還有下一頁
}
else{
this.finished = true; //當(dāng)前tab類型下所有數(shù)據(jù)已經(jīng)加載完成
}
//合并新老兩個(gè)數(shù)組數(shù)據(jù)
this.dataList = [...this.dataList, ...list];
//判斷頁面是否有數(shù)據(jù)
this.haveData = this.dataList.length > 0 ? 2 : 1;
this.isLoading = false; //下拉刷新請(qǐng)求完成
this.loading = false; //上拉加載更多請(qǐng)求完成
console.log("...datalist: ", this.dataList);
console.log("...this.isLoading: ", this.isLoading)
this.$nextTick(()=>{
setTimeout(()=>{
//渲染完成，計(jì)算每個(gè)item寬高，設(shè)置標(biāo)簽坐標(biāo)定位
this.setItemElementPosition();
this.isLoading = false; //下拉刷新請(qǐng)求完成
this.loading = false; //上拉加載更多請(qǐng)求完成
}, 1000)
});
},
//獲取每個(gè)item標(biāo)簽高度，設(shè)置item的定位
setItemElementPosition(){
let parentEle = document.getElementById('data-list-box');
let boxEles = parentEle.getElementsByClassName("data-item");
for (let i = this.itemCount; i < boxEles.length; i++){
let tempEle = boxEles[i];
//上一個(gè)標(biāo)簽最小高度的列索引
let curColIndex = this.getMinHeightIndex(this.lastRowHeights);
let boxTop = this.lastRowHeights[curColIndex] + this.boxMargin;
let boxLeft = curColIndex * (this.boxWidth + this.boxMargin) + this.boxMargin;
tempEle.style.left = boxLeft + 'px';
tempEle.style.top = boxTop + 'px';
this.lastRowHeights[curColIndex] = boxTop + tempEle.offsetHeight;
// console.log('i = ', i, ', boxTop: ', boxTop, ', eleHeight: ', tempEle.offsetHeight);
}
this.itemCount = boxEles.length;
//修改父級(jí)標(biāo)簽的高度
let maxHeight = Math.max.apply(null, this.lastRowHeights);
parentEle.style.height = maxHeight + 'px';
this.$toast.clear();
console.log("...boxEles: ", boxEles.length, ", maxH: ", maxHeight);
},2.4、其他說明
其他頁面中如下拉刷新，和上拉加載更多等功能，使用了有贊的組件庫(kù)中的PullRefresh 和 List這一套組合組件。感覺效果挺棒的，使用步驟也簡(jiǎn)單。另外就是在頁面渲染時(shí)，會(huì)出現(xiàn)頁面閃爍的現(xiàn)象，后面使用了一個(gè)css動(dòng)畫處理了這個(gè)現(xiàn)象，效果好了很多。但是在第一次加載的時(shí)候，還是有輕微的閃爍現(xiàn)象。等后面找到更好的方法，再更新。
以上是“vue如何實(shí)現(xiàn)網(wǎng)絡(luò)圖片瀑布流、下拉刷新、上拉加載更多的功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
新聞標(biāo)題：vue如何實(shí)現(xiàn)網(wǎng)絡(luò)圖片瀑布流、下拉刷新、上拉加載更多的功能-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://www.dlmjj.cn/article/ccdgcj.html
