【移動應(yīng)用開發(fā)技術(shù)】怎么在小程序中如何實現(xiàn)一個可截斷的瀑布流組件

【移動應(yīng)用開發(fā)技術(shù)】怎么在小程序中如何實現(xiàn)一個可截斷的瀑布流組件

這期內(nèi)容當(dāng)中在下將會給大家?guī)碛嘘P(guān)怎么在小程序中如何實現(xiàn)一個可截斷的瀑布流組件，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。瀑布流是一種常見的布局方式，實現(xiàn)的方式有許多，比如直接分兩列，然后控制在左右兩列加入元素；還有一種方式就是通過絕對定位的方式來放置兩邊。下面所要介紹的瀑布流不同于常規(guī)的，因為瀑布流中間可能會被截斷：對于上面的布局，如果強制分成兩列去做布局就不太適合了，因此我采用了絕對定位的方式來進行布局，由于瀑布流中的元素高度都不是固定的，因此我得想辦法獲取到每個元素的高度，然后判定元素到底是放一整行，還是左側(cè)，亦或者右側(cè)。首先我們來看下模板部分的實現(xiàn)：<view

class="container"

style="height:{{height}}px;">

<view

wx:for="{{list}}"

wx:key="index"

style="{{item.style}}"

class="wrapper">

<abstract

item="{{item}}"/>

</view>

</view>

<view

wx:if="{{tmp}}"

class="computed-zone">

<view

class="wrapper">

<abstract

item="{{tmp}}"/>

</view>

</view>模板比較簡單，一個container容器，然后循環(huán)數(shù)組，平級渲染出一堆wrapper容器。wrapper容器是一個絕對定位的包裹元素，wrapper容器里面需要放置需要實際渲染的組件，為了靈活性更高一點，我把這個渲染組件設(shè)置成了虛擬節(jié)點，在使用組件的時候可以指定實際渲染的自定義組件。因為wrapper元素是絕對定位的，因此我們需要手動去維護整個container容器的高度。這里有個問題是，我們怎么獲取里面元素的高度呢？模板中的computed-zone就是來解決這個問題的，在將元素放置到數(shù)組之前，我們先把元素在computed-zone中進行渲染，然后通過WXMLapi來獲取其中元素的實際渲染尺寸，這樣我們就可以知道這個元素實際渲染的寬高度了。有了每個元素的渲染尺寸信息之后，我們需要確認元素到底是占滿整行，還是占半邊：如果元素的渲染寬度跟容器一樣，那么就可以判斷這個元素沾滿一整行，需要將包裹容器wrapper設(shè)置為一整行的寬度；如果不滿足1條件，那么就需要基于左右元素的總高度，將wrapper放在左側(cè)或者右側(cè)。分析下來，需要稍微寫點兒邏輯的就是對wrapper計算偏移量，處理到底放左邊還是放右邊，亦或者占滿整行，核心的代碼實現(xiàn)如下：{

//

將

setData

Promise

化，方便使用

$setData(data)

{

return

new

Promise(resolve

=>

{

this.setData(data,

()

=>

{

resolve();

});

});

},

//

獲取元素的渲染尺寸

getRect(item)

{

return

this.$setData({

tmp:

item,

}).then(()

=>

{

return

new

Promise((resolve,

reject)

=>

{

const

query

=

this.createSelectorQuery();

//

注意要使用

this，不要再使用

wx

前綴了

query.select('.computed-zone

.wrapper').boundingClientRect();

query.exec(ret

=>

{

if

(ret[0])

{

resolve(ret[0]);

}

else

{

reject('not

found

dom!');

}

});

});

});

},

//

添加元素，內(nèi)部使用

addItem(item)

{

let

tick

=

this.tick;

return

this.getRect(item).then(rect

=>

{

if

(tick

!==

this.tick)

{

return

Promise.reject('tick');

}

const

{

margin

}

=

this.data;

let

{

height,

width

}

=

rect;

const

windowWidth

=

this.sysInfo.windowWidth;

let

[

leftTotal,

rightTotal

]

=

this.height;

//

leftTotal

左側(cè)欄高度，rightTotal

右側(cè)欄高度，

let

marginPx

=

this.sysInfo.getPx(margin);

let

style

=

'';

if

(Math.abs(width

-

windowWidth)

<

3)

{

//

占滿屏幕寬度

style

=

`left:0;top:${

Math.max(leftTotal,

rightTotal)

}px;width:100%;`;

leftTotal

=

rightTotal

=

Math.max(leftTotal

+

height,

rightTotal

+

height);

}

else

if

(rightTotal

<

leftTotal)

{

//

放入右邊

style

=

`right:${

marginPx

}px;top:${

rightTotal

}px;`;

rightTotal

+=

height;

}

else

{

//

放入左邊

style

=

`left:${

marginPx

}px;top:${

leftTotal

}px;`;

leftTotal

+=

height;

}

const

{

list

=

[]

}

=

this.data;

const

targetKey

=

`list[${list.length}]`;

//

利用直接操作數(shù)組下標(biāo)的方式來觸發(fā)數(shù)組修改，性能有很大提升

this.height

=

[leftTotal,

rightTotal];

//

記錄最新的左右側(cè)高度

return

this.$setData({

[targetKey]:

{

data:

item,

style,

},

height:

Math.max(leftTotal,

rightTotal),

});

});

},

//

實際添加元素使用，自建Promise隊列，保證順序一致

add(item)

{

let

pending

=

this.pending

||

Promise.resolve();

return

this.pending

=

pending.then(()

=>

{

return

this.addItem(item);

}).catch(err

=>

{

console.error(err);

this.pending

=

null;

throw

err;

});

},

clear()

{

this.tick

=

tick++;

this.height

=

[0,

0];

this.pending

=

null;

this.setData({

list:

[],

height:

0,

});

},

}在使用該組件的時候我們就不能直接通過賦值數(shù)組的方式來渲染元素了，而是得通過組件實例方法add(it