切り詰められたウォーターフォール フロー コンポーネントをミニ プログラムに実裝するにはどうすればよいですか?以下の記事では、ウォーターフォールフローの要素をカットできるWeChatアプレットの実裝方法を紹介しますので、ご參考になれば幸いです。

ウォーターフォールフローは一般的なレイアウト手法ですが、直接2列に分割し、左側(cè)の要素の追加を制御するなど、実裝方法はさまざまです。と右側(cè)の列; 絶対配置によって両側(cè)を配置する別の方法もあります。 [関連する學(xué)習(xí)の推奨事項(xiàng): 小さなプログラム開発チュートリアル ]

この記事で紹介するウォーターフォール フローは、従來のものとは異なります。これは、ウォーターフォール フローが途中で切れている場(chǎng)合があるためです。

##上記のレイアウトでは、無理に2列にレイアウトするのは適切ではないので、絶対配置でレイアウトしました。したがって、各要素の高さを取得する方法を見つけて、要素を行全體に配置するか、左側(cè)に配置するか、右側(cè)に配置するかを決定する必要があります。

まず、テンプレート部分の実裝を見てみましょう:

<view class="container"   style="max-width:90%">
	<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 コンテナで、配列をループし、多數(shù)のレンダリングを行います。 水平ラッパー コンテナー。

wrapper コンテナは、絶対的に配置されたラッピング要素です。 wrapper コンテナは、実際にレンダリングする必要があるコンポーネントを配置する必要があります。より柔軟にするために、 render this コンポーネントを仮想ノードとして設(shè)定し、コンポーネントを使用する際に実際にレンダリングするカスタムコンポーネントを指定できます。

wrapper 要素は絶対位置に配置されているため、container コンテナ全體の高さを手動(dòng)で維持する必要があります。

ここでの質(zhì)問は、內(nèi)部の要素の高さをどうやって取得するかということです。テンプレートの

computed-zone は、この問題を解決するためのものです。要素を配列に配置する前に、まず computed-zone で要素をレンダリングし、次に WXML API を使用して取得します要素の実際のレンダリング サイズ。これにより、この要素の実際にレンダリングされた幅と高さを知ることができます。

各要素のレンダリング サイズ情報(bào)を取得した後、要素が行全體を占めるか行の半分を占めるかを確認(rèn)する必要があります。要素が同じである場(chǎng)合、コンテナが同じ場(chǎng)合、この要素が行全體を埋めると判斷でき、ラッピング コンテナ

wrapper

を行全體の幅に設(shè)定する必要があります。

• 1 の條件を満たさない場(chǎng)合は、左右の要素の高さの合計(jì)に基づいて、wrapper を左右に配置する必要があります。

• 分析後、少し書く必要があるのは、wrapper のオフセットを計(jì)算し、それを左に配置するか右に配置するか、またはどちらに配置するかを決定することです。行全體を占めます。コア コードは次のように実裝されます:

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

  このコンポーネントを使用する場(chǎng)合、配列を割り當(dāng)てて要素を直接レンダリングすることはできませんが、コンポーネント インスタンス メソッド add(item) を使用する必要があります。 )

  ちなみに、キューを?qū)g裝したので、直接ループ追加するだけです。ステータスが気になる場(chǎng)合は、最後の要素の追加操作が完了したかどうかだけを判斷してください。 この方法で実現(xiàn)されるウォーターフォール フローは比較的柔軟ですが、パフォーマンスの消費(fèi)は低くありません。要素の実際のレンダリング サイズを 1 つずつ取得する必要があります。ウィンドウのサイズ変更をサポートしたい場(chǎng)合は、 、消耗がひどいです。

  コードの詳細(xì)を確認(rèn)する必要がある學(xué)生のために、Github および

  WeChat コード スニペット

  に実際のデモを置きました。試す。

  上記のモデルに基づいて、実際に可視領(lǐng)域內(nèi)の要素のみをレンダリングするように最適化することができ、これによりウォーターフォール フローのパフォーマンスが大幅に向上します。時(shí)間のある學(xué)生が改善できることを願(yuàn)っています。気に入ってください~o (￣▽￣)dプログラミング関連の知識(shí)については、プログラミング ビデオをご覧ください。 ！

  以上が小さなプログラムで切り詰められたウォーターフォール フロー コンポーネントを?qū)g裝する方法について話しましょうの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。