Mari kita bincangkan tentang cara melaksanakan komponen aliran air terjun terpotong dalam program kecil

Bagaimana untuk melaksanakan komponen aliran air terjun terpotong dalam program mini? Artikel berikut akan memperkenalkan kepada anda cara melaksanakan applet WeChat yang boleh memotong komponen aliran air terjun. Saya harap ia akan membantu anda!

Aliran air terjun ialah kaedah susun atur biasa Terdapat banyak cara untuk melaksanakannya, seperti membahagikan terus kepada dua lajur, dan kemudian mengawal penambahan elemen di sebelah kiri dan. lajur kanan; terdapat satu lagi cara Ia adalah untuk meletakkan kedua-dua belah melalui kedudukan mutlak. [Cadangan pembelajaran berkaitan: Tutorial Pembangunan Program Mini]

Aliran air terjun yang diperkenalkan dalam artikel ini berbeza daripada yang konvensional, kerana aliran air terjun mungkin terputus di tengah:

Untuk susun atur di atas, ia tidak sesuai jika dipaksa untuk dibahagikan kepada dua lajur, jadi saya menggunakan kedudukan mutlak untuk susun atur Sejak ketinggian elemen dalam air terjun aliran tidak tetap, Oleh itu, saya perlu mencari jalan untuk mendapatkan ketinggian setiap elemen, dan kemudian menentukan sama ada elemen itu harus diletakkan pada keseluruhan baris, di sebelah kiri, atau di sebelah kanan.

Mula-mula, mari kita lihat pelaksanaan bahagian templat:

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

Templat agak mudah, bekas container dan kemudian gelung melalui tatasusunan untuk menghasilkan sekumpulan wrapper bekas rata.

wrapper Bekas adalah elemen pembalut yang diposisikan secara mutlak wrapper Bekas perlu meletakkan komponen yang perlu dibuat untuk menjadi lebih fleksibel, saya menetapkan komponen pemaparan ini sebagai nod maya . Apabila menggunakan komponen, anda boleh menentukan komponen tersuai yang sebenarnya diberikan.

Oleh kerana elemen wrapper berada pada kedudukan mutlak, kita perlu mengekalkan ketinggian keseluruhan container secara manual.

Persoalan di sini ialah, bagaimana kita boleh mendapatkan ketinggian unsur di dalamnya? computed-zone dalam templat ada di sini untuk menyelesaikan masalah ini Sebelum meletakkan elemen ke dalam tatasusunan, kami mula-mula memberikan elemen dalam computed-zone, dan kemudian menggunakan api WXML untuk mendapatkan saiz pemaparan sebenar elemen, supaya. kita boleh Mengetahui lebar dan ketinggian sebenar yang diberikan bagi elemen ini.

Selepas mempunyai maklumat saiz pemaparan setiap elemen, kami perlu mengesahkan sama ada elemen itu menduduki keseluruhan baris atau separuh daripadanya:

• Jika lebar pemaparan bagi elemen adalah sama dengan Jika bekas adalah sama, maka anda boleh menilai bahawa elemen ini memenuhi keseluruhan baris, dan anda perlu menetapkan bekas pembalut wrapper kepada lebar keseluruhan baris; 🎜>

  Jika 1 syarat tidak dipenuhi, maka Anda perlu meletakkan
di kiri atau kanan berdasarkan jumlah ketinggian elemen kiri dan kanan.

• wrapper

  Selepas analisis, apa yang perlu ditulis sedikit ialah mengira offset
dan sama ada meletakkannya di kiri atau kanan, atau sama ada ia mengambil keseluruhan baris, kod teras Pelaksanaannya adalah seperti berikut:

wrapperApabila menggunakan komponen ini, kita tidak boleh memaparkan elemen secara langsung dengan menetapkan tatasusunan, tetapi mesti menggunakan kaedah contoh komponen

kerana saya melaksanakan baris gilir , jadi anda boleh gelung tambah terus. Jika anda mengambil berat tentang status, hanya tentukan sama ada operasi tambah elemen terakhir telah selesai.

{
	// 将 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}]`; // 利用直接操作数组下标的方式来触发数组修改，性能有很大提升
			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,
		});
	},
}

Fleksibiliti aliran air terjun yang dicapai dengan cara ini adalah agak tinggi, tetapi penggunaan prestasi tidak rendah Anda perlu mendapatkan saiz pemaparan sebenar unsur-unsur tersebut jika anda ingin menyokong saiz semula daripada tingkap, penggunaannya sangat teruk. add(item)

Bagi pelajar yang perlu melihat butiran kod, saya telah meletakkan demo sebenar pada

Github

dan

coretan kod WeChat. Pelajar yang memerlukan boleh memberikannya cubalah. Berdasarkan model di atas, ia sebenarnya boleh dioptimumkan untuk hanya memaparkan elemen dalam kawasan yang boleh dilihat, yang boleh meningkatkan prestasi aliran air terjun saya harap pelajar yang mempunyai masa dapat memperbaikinya suka~o (￣▽￣)ｄ

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Video Pengaturcaraan

! !

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara melaksanakan komponen aliran air terjun terpotong dalam program kecil. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!