您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)怎么在小程序中如何實(shí)現(xiàn)一個(gè)可截?cái)嗟钠俨剂鹘M件,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
瀑布流是一種常見的布局方式,實(shí)現(xiàn)的方式有許多,比如直接分兩列,然后控制在左右兩列加入元素;還有一種方式就是通過(guò)絕對(duì)定位的方式來(lái)放置兩邊。
下面所要介紹的瀑布流不同于常規(guī)的,因?yàn)槠俨剂髦虚g可能會(huì)被截?cái)啵?/p>
對(duì)于上面的布局,如果強(qiáng)制分成兩列去做布局就不太適合了,因此我采用了絕對(duì)定位的方式來(lái)進(jìn)行布局,由于瀑布流中的元素高度都不是固定的,因此我得想辦法獲取到每個(gè)元素的高度,然后判定元素到底是放一整行,還是左側(cè),亦或者右側(cè)。
首先我們來(lái)看下模板部分的實(shí)現(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>
模板比較簡(jiǎn)單,一個(gè) container
容器,然后循環(huán)數(shù)組,平級(jí)渲染出一堆 wrapper
容器。
wrapper
容器是一個(gè)絕對(duì)定位的包裹元素,wrapper
容器里面需要放置需要實(shí)際渲染的組件,為了靈活性更高一點(diǎn),我把這個(gè)渲染組件設(shè)置成了虛擬節(jié)點(diǎn),在使用組件的時(shí)候可以指定實(shí)際渲染的自定義組件。
因?yàn)?wrapper
元素是絕對(duì)定位的,因此我們需要手動(dòng)去維護(hù)整個(gè) container
容器的高度。
這里有個(gè)問(wèn)題是,我們?cè)趺传@取里面元素的高度呢?模板中的 computed-zone
就是來(lái)解決這個(gè)問(wèn)題的,在將元素放置到數(shù)組之前,我們先把元素在 computed-zone
中進(jìn)行渲染,然后通過(guò) WXML api 來(lái)獲取其中元素的實(shí)際渲染尺寸,這樣我們就可以知道這個(gè)元素實(shí)際渲染的寬高度了。
有了每個(gè)元素的渲染尺寸信息之后,我們需要確認(rèn)元素到底是占滿整行,還是占半邊:
如果元素的渲染寬度跟容器一樣,那么就可以判斷這個(gè)元素沾滿一整行,需要將包裹容器 wrapper
設(shè)置為一整行的寬度;
如果不滿足1條件,那么就需要基于左右元素的總高度,將 wrapper
放在左側(cè)或者右側(cè)。
分析下來(lái),需要稍微寫點(diǎn)兒邏輯的就是對(duì) wrapper
計(jì)算偏移量,處理到底放左邊還是放右邊,亦或者占滿整行,核心的代碼實(shí)現(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)的方式來(lái)觸發(fā)數(shù)組修改,性能有很大提升 this.height = [leftTotal, rightTotal]; // 記錄最新的左右側(cè)高度 return this.$setData({ [targetKey]: { data: item, style, }, height: Math.max(leftTotal, rightTotal), }); }); }, // 實(shí)際添加元素使用,自建Promise隊(duì)列,保證順序一致 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í)候我們就不能直接通過(guò)賦值數(shù)組的方式來(lái)渲染元素了,而是得通過(guò)組件實(shí)例方法add(item)
的方式,因?yàn)槲覍?shí)現(xiàn)了隊(duì)列,因此可以直接循環(huán) add 就行。如果關(guān)心狀態(tài)就判斷最后一個(gè)元素的 add 操作是否完成即可。
通過(guò)這種方式來(lái)實(shí)現(xiàn)的瀑布流靈活性相對(duì)較高,但是性能消耗也是不低的,需要挨個(gè)獲取元素的實(shí)際渲染尺寸,如果要支持窗口的resize的話,那消耗是恐怖。
對(duì)于需要看代碼細(xì)節(jié)的同學(xué),我將實(shí)際的demo放到了 Github 和 微信代碼片段。
上述就是小編為大家分享的怎么在小程序中如何實(shí)現(xiàn)一個(gè)可截?cái)嗟钠俨剂鹘M件了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。