uniapp小程序?qū)崿F(xiàn)瀑布流布局的思路與代碼

第uniapp小程序?qū)崿F(xiàn)瀑布流布局的思路與代碼//用JS原生實(shí)現(xiàn)時(shí)可以直接用for循環(huán)插入，然后獲取列高度

//這里通過載入圖片調(diào)用方法，默認(rèn)傳參帶有圖片信息，可以獲得圖片高度

blockv-for(iteminimgList":key="item.id"

image:src="item.url"@load="loadImg"/iamge

/block

/view

viewv-for="(list,key)inwaterfall":key="key"

navigatorurl=""v-for="iteminlist.list":key="item.id"

image:src="item.url"mode="widthFix"/image

view

/*標(biāo)題等信息，略*/

/view

/navigator

/view

/view

/template

script

exportdefault{

//抽出為單獨(dú)的組件，所以數(shù)據(jù)來源于父組件傳遞，也可以是當(dāng)前組件請(qǐng)求API

props:{imgList:Array},

data(){

return{

lists:[],//備份imgList用的數(shù)組，方便操作

waterfall:[

//用于記錄當(dāng)前列的高度，不在方法中保存是為了上拉獲取新數(shù)據(jù)也能使用

//因?yàn)槟J(rèn)手機(jī)顯示，可以固定兩列

//如果是做自適應(yīng)或者電腦端多列，可以動(dòng)態(tài)插入實(shí)現(xiàn)多列

height:0,

list:[]

height:0,

list:[]

created(){

this.lists=this.imgList;//Vue創(chuàng)建data后立即備份

watch(){

//監(jiān)聽數(shù)據(jù)源，如果有新值傳入，則用lists數(shù)組備份

imgList(data){data.lengththis.lists.push(...data);}

methods:{

loadImg(ev){

letRoot=this.waterfall;

letheight=e.detail.height;

//根據(jù)當(dāng)前高度決定將新數(shù)據(jù)給誰，并更新列高度；優(yōu)先插入左側(cè)

if(Root[0].height=Root[1].height){

//考慮熱度優(yōu)先的問題，所以用的是shift()方法推出頭部數(shù)據(jù)。

Root[0].list.push(this.lists.shift())

Root[0].height+=height;

}else{

Root[1].list.push(this.lists.shift())

Root[1].height+=height;

/script

至此，核心代碼就完成了。

PS：因?yàn)橐栌蒳mage的@load事件來觸發(fā)方法，所以大量加載勢(shì)必會(huì)影響性能，所以要自己做點(diǎn)取舍了。

四、總結(jié)