怎么在小程序中如何實(shí)現(xiàn)一個(gè)可截?cái)嗟钠俨剂鹘M件

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)怎么在小程序中如何實(shí)現(xiàn)一個(gè)可截?cái)嗟钠俨剂鹘M件，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專注于成都定制網(wǎng)頁設(shè)計(jì),高端網(wǎng)頁制作,對成都門窗定制等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專業(yè)成都網(wǎng)站營銷優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。

瀑布流是一種常見的布局方式，實(shí)現(xiàn)的方式有許多，比如直接分兩列，然后控制在左右兩列加入元素；還有一種方式就是通過絕對定位的方式來放置兩邊。

下面所要介紹的瀑布流不同于常規(guī)的，因?yàn)槠俨剂髦虚g可能會被截?cái)啵?/p>

對于上面的布局，如果強(qiáng)制分成兩列去做布局就不太適合了，因此我采用了絕對定位的方式來進(jìn)行布局，由于瀑布流中的元素高度都不是固定的，因此我得想辦法獲取到每個(gè)元素的高度，然后判定元素到底是放一整行，還是左側(cè)，亦或者右側(cè)。

首先我們來看下模板部分的實(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>

模板比較簡單，一個(gè) container 容器，然后循環(huán)數(shù)組，平級渲染出一堆 wrapper 容器。

wrapper 容器是一個(gè)絕對定位的包裹元素，wrapper 容器里面需要放置需要實(shí)際渲染的組件，為了靈活性更高一點(diǎn)，我把這個(gè)渲染組件設(shè)置成了虛擬節(jié)點(diǎn)，在使用組件的時(shí)候可以指定實(shí)際渲染的自定義組件。

因?yàn)?wrapper 元素是絕對定位的，因此我們需要手動去維護(hù)整個(gè) container 容器的高度。

這里有個(gè)問題是，我們怎么獲取里面元素的高度呢？模板中的 computed-zone 就是來解決這個(gè)問題的，在將元素放置到數(shù)組之前，我們先把元素在 computed-zone 中進(jìn)行渲染，然后通過 WXML api 來獲取其中元素的實(shí)際渲染尺寸，這樣我們就可以知道這個(gè)元素實(shí)際渲染的寬高度了。

有了每個(gè)元素的渲染尺寸信息之后，我們需要確認(rèn)元素到底是占滿整行，還是占半邊：

  • 如果元素的渲染寬度跟容器一樣，那么就可以判斷這個(gè)元素沾滿一整行，需要將包裹容器 wrapper 設(shè)置為一整行的寬度；

  • 如果不滿足1條件，那么就需要基于左右元素的總高度，將 wrapper 放在左側(cè)或者右側(cè)。

分析下來，需要稍微寫點(diǎn)兒邏輯的就是對 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)的方式來觸發(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í)候我們就不能直接通過賦值數(shù)組的方式來渲染元素了，而是得通過組件實(shí)例方法add(item) 的方式，因?yàn)槲覍?shí)現(xiàn)了隊(duì)列，因此可以直接循環(huán) add 就行。如果關(guān)心狀態(tài)就判斷最后一個(gè)元素的 add 操作是否完成即可。

通過這種方式來實(shí)現(xiàn)的瀑布流靈活性相對較高，但是性能消耗也是不低的，需要挨個(gè)獲取元素的實(shí)際渲染尺寸，如果要支持窗口的resize的話，那消耗是恐怖。

對于需要看代碼細(xì)節(jié)的同學(xué)，我將實(shí)際的demo放到了 Github 和 微信代碼片段。

上述就是小編為大家分享的怎么在小程序中如何實(shí)現(xiàn)一個(gè)可截?cái)嗟钠俨剂鹘M件了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁名稱：怎么在小程序中如何實(shí)現(xiàn)一個(gè)可截?cái)嗟钠俨剂鹘M件
文章網(wǎng)址：http://muchs.cn/article46/ipgihg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、定制網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營