<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>

{
?? ?// 將 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,
?? ??? ?});
?? ?},
}