uniapp實現瀑布流懶載入實現和無限上拉載入更多

2021-10-13 13:05:01 字數 583 閱讀 6683

效果圖:

說明:函式說明:傳入乙個陣列,迴圈獲取高度,會根據把原陣列拆分成兩個陣列,放在兩列,

計算單列累計高度,對比高度值的大小,實現瀑布流的布局,

由於獲取高度需要一定的時間,所以使用async await 阻塞for 迴圈的程序,

每獲取到乙個的高度就賦值渲染到頁面上,實現載入出乙個就先渲染上去,達成懶載入的效果

引數說明:

必填:arr:陣列,裡面有物件,對比物件裡面的高度,返回兩個陣列

attributename:要根據陣列裡物件指定屬性名稱(的 key)

非必填:

otherheight:瀑布流的盒子其它組成部分的高度,例如點讚那行,因為瀑布流不單單是組成

minheight: 最小高度,如果沒有,也會使用最小高度,相當於預設高度

maxheight:最大高度,超出高度就按照 maxheight 進入當前列累計高度

**:

}

}

}}

}

}很遺憾您的審核未通過

審核未通過原因:}返回

HTML CSS JS 瀑布流式布局(實現懶載入)

首先來說一下瀑布流的原理吧 瀑布流是許多資料塊組成的,可以是,可以是div,但是它們都有乙個特點,就是等寬不等高,正是因為它等寬不等高,所以如果按部就班的排布的話,才會出現很大的縫隙,特別不好看,說白了瀑布流布局就是充分利用之間的空隙來合理的布局,使布局看起來好看。首先上css布局 因為個人喜歡比較...

QTableWidget懶載入(動態載入)實現

在qtablewidget中加入一行行的資料,如果資料數量過多,滾動起來就會卡頓,插入資料時也會影響效能,為了解決這個問題,採用懶載入的方式,只在介面上顯示10幾條資料,填滿介面。同時增加而外的豎直滾動條,控制滾動條滑塊的大小,給外界看到的效果就是有隨著資料數量的增加,滾動條減小。滾動滾動條,或者插...

瀑布流實現

html 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 js 一定要用window.onload不能用 function var data window.onload function pbl pbl function pbl...