?? ?????? ?? ?? ?? ?? ??? ???? ??? ?????? ?? ???? ??? ?? ?? ??? ??? ? ?? WeChat ???? ???? ??? ???????. ??? ?? ????.

?? ??? ???? ???? ?? ??? ????. ?? ?? ?? ? ?? ?? ?? ?? ??? ??? ?? ?? ??? ???? ??? ?? ??? ? ??? ?? ???? ????. ?? ?? ??? ?? ??. [?? ?? ?? : ?? ???? ?? ????]

? ??? ??? ??? ??? ??? ??? ??? ????. ???? ??? ??? ??? ?? ? ?? ?????:

? ????? ?? , ??? ? ?? ?? ???? ?? ?? ????? ???? ?? ????? ?? ?? ??? ??????. ?? ??? ?? ??? ???? ?? ?? ??? ??? ?? ? ?? ??? ??? ???. ? ??? ??? ??? ?? ???? ???? ?? ?? ?????.

?? ??? ??? ??? ???????.

<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 容器里面需要放置需要實際渲染的組件，為了靈活性更高一點，我把這個渲染組件設置成了虛擬節(jié)點，在使用組件的時候可以指定實際渲染的自定義組件。

因為 wrapper 元素是絕對定位的，因此我們需要手動去維護整個 container 容器的高度。

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

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

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

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

分析下來，需要稍微寫點兒邏輯的就是對 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!');
					}
				});
			});
		});
	},
	// 添加元素，內部使用
	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 左側欄高度，rightTotal 右側欄高度，
			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ù)組下標的方式來觸發(fā)數(shù)組修改，性能有很大提升
			this.height = [leftTotal, rightTotal]; // 記錄最新的左右側高度
			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(item)

wrapper ????? ????? ??? ?? ?????. ??? ????? ?? ?? ??? ?? ???? ????? ???. ? ??? ????? ????? ?? ??? ???, ?? ????? ??? ? ??? ????? ??? ????? ??? ? ????.

wrapper ??? ?? ??? ???? ?? container ????? ??? ???? ???? ???.

??? ??? ?? ??? ??? ??? ????? ????. ???? computed-zone? ? ??? ???? ?? ???????. ??? ??? ???? ?? ?? computed-zone? ??? ???? ?? WXML API? ?????. ??? ?? ??? ??? ???? ? ??? ?? ???? ??? ??? ? ? ????. ? ??? ??? ?? ??? ?? ? ??? ?? ?? ????? ??? ??? ????? ???? ???.

• ?? ??? ??? ????? ???? ? ??? ?? ?? ???? ??? ? ??? ?? ???? wrapper? ?? ?? ??? ???? ???

  li>

• ??? ?? ?? ?? 1? ???? ?? ??? ??? ??? ?? ??? ???? wrapper? ?? ?? ???? ???? ???.

?? ? ?? ???? ? ?? wrapper? ???? ???? ??? ??? ???? ??? ?? ??? ???? ????. ?? ??? ??? ?? ?????. rrreee? ????? ??? ? ??? ???? ??? ?? ???? ?? ???, ???? ???? ??? add(item)? ???? ???. ???? ???? ??? ??? ?? ??? ? ????. ??? ??? ??? ??? ??? ?? ??? ?????? ???? ???. ?????? ???? ??? ?? ??? ???? ????? ??? ?? ??? ?? ????. ? ?? ??? ????? ??? ?? ??? ??? ??? ???? ???. ??? ????. ??????? ?? ??? ???? ?? ???? ?? ??Github?? ? ??WeChat ?? ?????? ?? ??? ???????. ????? ??? ???? ??? ?? ?? ?? ??? ?????? ???? ? ???? ?? ??? ??? ?? ???? ? ????. ??? ?? ???? ??? ? ? ??? ????~ o(￣▽￣ )ｄ????? ?? ????? ?? ??? ??? ??????? ?????? ?????! ! ??

? ??? ?? ?????? ?? ??? ?? ?? ??? ???? ??? ?? ???? ?????.? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!