谈谈如何在applet中实现截断的瀑布组件（applet瀑布加载数据）

如何在小程序中实现截断的瀑布组件？下面这篇文章给大家介绍了使用微信小程序截掉瀑布组件的方法，希望对大家有所帮助！

瀑布流是一种常见的布局方式，可以通过多种方式实现，比如直接将其分为两列，然后控制在左右两列中添加元素；另一种方法是通过绝对定位来放置两边。【相关学习推荐:小程序开发教程】

本文介绍的瀑布流不同于传统的瀑布流，因为瀑布流的中间可能被截断:

对于上面的布局，如果强行分成两列是不适合的，所以我采用了绝对定位的方法进行布局。因为瀑布中元素的高度不是固定的，所以我必须想办法获得每个元素的高度，然后决定元素是放在一整行中，左边还是右边。

首先，让我们看看模板部分的实现:

模板比较简单，一个容器容器，然后循环数组，一级渲染一堆包装容器。

包装容器是一个绝对定位的包装元素，需要实际呈现的组件需要放在包装容器中。为了更加灵活，我将这个渲染组件设置为虚拟节点，您可以在使用组件时指定实际渲染的自定义组件。

因为包装器元素是绝对定位的，所以我们需要手动维护整个容器容器的高度。

这里的问题是，我们如何获得内部元素的高度？模板中的Computed-zone用于解决这个问题。在将元素放入数组之前，我们首先在computed-zone中渲染元素，然后通过WXML api获取元素的实际渲染大小，这样我们就可以知道元素实际渲染的宽度和高度。

有了每个元素的渲染尺寸信息，我们需要确认该元素是占据整行还是半行:

如果元素的渲染宽度与容器的渲染宽度相同，那么可以判断元素被一整行覆盖，需要将包装容器包装器设置为一整行的宽度；

如果不满足条件1，则需要根据左侧和右侧元素的总高度将包装放在左侧或右侧。

经过分析，需要一点逻辑的是计算包装器的偏移量，并处理是将其放在左边还是右边，还是占据整行。核心代码实现如下:

{//Make 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。createselectquery（）；//小心使用它，不要使用wx前缀query . select（& # 39；。computed -区域。包装& # 39；).boundingClientRect（）；query . exec（ret =》{ if（ret【0】）{ resolve（ret【0】）；} else { reject（& # 39；找不到dom！');}});});});}，//添加元素，内部使用additive（item）{ let tick = this . tick；返回this . get rect（item）。然后（rect =》{ if（tick！= = this . tick）{ return promise . reject（& # 39；滴答& # 39；);} const { margin } = this.data设{ height，width } = rectconst window width = this . sysinfo . window width；let【left total，right total】= this . height；// leftTotal左列高度，rightTotal右列高度，let margin px = this . sysinfo . getpx（margin）；let style = & # 39'；如果（数学。ABS（width -窗口宽度）《3）{//全屏宽度style = ` left:0；top:$ { math . max（left total，right total）} px；宽度:100%；`;left total = right total = math . max（left total+height，right total+height）；} else if（right total《left total）{//放在右边style = ` right:$ { margin px } px；top:$ { right total } px；`;right total+= height；} else {//放在left style = ` left:$ { margin px } px；top:$ { left total } px；`;left total+= height；} const { list =【】} = this . data；const target key = ` list【$ { list . length }】`；//通过直接操作数组下标来触发数组修改，从而大大提高了性能。这个。height =【left total，right total】；//记录最新的左右高度返回本。$ setdata（{【target key】:{ data:item，style，}，height:math . max（left total，right total，}）；});}，//实际添加元素的使用，自己构建Promise队列，并保证相同的顺序Add（item）{ let pending = this。待定||承诺。resolve（）；return this . pending = pending . then（（）=》{ return this . additem（item）；}).catch（err =》{ console . error（err）；this.pending = null抛出err});}，clear（）{ this . tick = tick++；this . height =【0，0】；this.pending = nullthis . setdata（{ list:【】，height: 0，}）；}，}在使用这个组件时，我们不能直接通过分配数组来呈现元素，而是通过添加（item）组件实例方法来呈现元素，因为我已经实现了队列，所以我可以直接循环添加。如果您关心状态，只需判断最后一个元素的添加操作是否完成。

这样实现的瀑布流灵活性比较高，但性能消耗不低，需要逐个获取元素的实际渲染大小。如果窗口要调整大小，消耗是可怕的。

对于需要查看代码细节的同学，我将实际演示放在了Github和微信代码片段中，有需要的同学可以试一试。

基于上述模型，实际上它还可以优化为仅渲染可视区域内的元素，这可以大大提高瀑布流的性能。希望有时间的同学可以完善一下。让我在叉点赞~ o（~￣￣￣）d。

更多编程相关知识请访问:编程视频！！

以上是如何在小程序中实现截断瀑布组件的细节。更多资讯请关注主机参考等相关文章！

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

• 手把手指导你在小程序中实现保存图片的功能（小程序申请保存图片到相册）
• 如何在小程序中创建页面二维码
• 小程序如何动态制作小程序码分析（如何在小程序中动态生成小程序二维码图片）
• 如何解决小程序中的重启跳转错误（小程序重启）
• 教你如何部署微信小程序并上线（如何在线部署小程序）

本文由主机参考刊发，转载请注明：谈谈如何在applet中实现截断的瀑布组件（applet瀑布加载数据） https://zhujicankao.com/104810.html