介绍如何在小程序中实现截断瀑布流组件（小程序瀑布流布局）。

如何在小程序中实现截断瀑布流组件？下一篇我将向大家展示如何实现一个可以截断瀑布流组件的微信小程序。 我们希望这对您有所帮助！

瀑布流是一种常见的布局方法。 实现方式有很多种，比如直接拆成两列，控制左右列元素的添加等。 另一种方法是使用绝对定位来定位两侧。 【相关学习推荐：小程序开发教程】

本文呈现的瀑布流是非传统的。 这是因为瀑布水流可能会在中途中断。

上面的布局如果强行分成两列就不合适了，所以我采用绝对定位的方式来布局。 瀑布流中元素的高度不是固定的，因此需要找到一种方法来移动每个元素的高度，以便它填充整行、向左对齐或跨行对齐，您需要决定哪一个。 正确的。

首先我们看一下模板部分的实现。

模板是一个相对简单的容器容器，它循环遍历数组并将许多包装容器呈现为扁平的。

包装容器是绝对定位的包装元素。 实际需要渲染的组件应该放在包装容器中。 为了获得更大的灵活性，请将此渲染组件设置为虚拟节点。 使用组件时，您可以指定一个自定义组件来实际绘制。

包装元素是绝对定位的，因此必须手动维护整个容器的高度。

这里的问题是我们如何获取内部元素的高度？ 模板计算-zone 旨在解决这个问题。 放置元素后在进入数组之前，首先渲染compute-zone中的元素，然后使用WXML API获取元素的实际渲染大小。 这将告诉您该元素的实际渲染宽度和高度。

获取每个元素的渲染大小信息后，我们需要检查该元素是占据整行还是半行。

如果一个元素具有相同的渲染宽度，如果指定为容器，则可以确定该元素填充整行，并且包装容器的包装器应设置为整行的宽度。

如果不满足条件1，则包装器应根据左右元素的高度之和进行定位。 左侧或右侧。

经过分析，我们需要在包装器中多写一点逻辑。 计算偏移量并决定是左对齐、右对齐还是占据整行。 核心代码实现如下。

{// 将 setData 转换为 Promise 以便于使用 $setData(data) {return new Promise(solve => {this.setD ata(data, () => {resolve( );});} ) ;},// 获取元素的渲染大小 getRect(item) {return this.$setData({tmp: item,}).then((( ) => {return new Promis e((resolve,spect) => {const query = this.createSelectorQuery(); // 注意使用 this 而不是 wx 前缀 query.select('.compulated-zone .wrapper' ).boundingClientRect() ; query.exec(ret => {if (ret[0]) {resolve(ret[0]);} else {reject('未找到 dom!');}});} );});},//添加元素。 内部 addItem(item) {let tiny = this.tick;return this.getRect(item).then(rect => {if (tick !== this.tick) {return Promise.reject('tick' ) ;}const { 边距 } = this.data ;let { 高度, 宽度 } = 矩形;const windowWidth = this.sysInfo.windowWidth;let [ leftTotal, rightTotal ] = this.height; // left 左列总高度，右列总高度，marginPx = this.sysInfo.getPx(margin);let style = '';if (Math.abs(width - windowWidth ) {返回 this.addItem(item);}).catch(err => {console.error(err );this.pending = null;抛出 e rr;});},clear() {this.tick =tic++;this.height = [0, 0];this.pending = null;this.setData({list: [],height: 0,}); },}

使用该组件时，无法渲染元素，但必须将数组直接赋值给组件实例方法add(item)。 你应该使用队列，所以如果你关心状态，你可以简单地循环添加来确定最后一个元素添加操作是否完成，这样你就获得了瀑布流的灵活性，性能消耗相对较高。但你必须一一获得元素的实际渲染。如果要支持窗口大小调整，成本是巨大的。

对于需要查看代码详细信息的同学，我们在 Github 和微信上的代码片段中放置了一个工作演示。 如果您是一名遇到困难的学生，请尝试一下。

基于上面的模型，你实际上可以优化为只渲染可见区域内的元素，这将显着提高你的瀑布流的性能。 希望有时间的同学能够完善一下。 我会fork它并喜欢它~o(￣▽￣)d

编程相关知识请观看编程视频。 ！

PHP快速学习视频免费教程（从入门到精通）

如何学习PHP？我应该从哪里学习PHP？别担心。 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

这几篇文章你可能也喜欢：

• 谈谈如何在applet中实现截断的瀑布组件（applet瀑布加载数据）
• 谈谈如何在小程序中实现一个截断的瀑布组件(小程序瀑布效果)

本文由主机参考刊发，转载请注明：介绍如何在小程序中实现截断瀑布流组件（小程序瀑布流布局）。 https://zhujicankao.com/141860.html