谈谈如何在小程序中实现一个截断的瀑布组件(小程序瀑布效果)

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

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

本文要介绍的瀑布不同于常规的瀑布，因为瀑布可能会在中间被截断:

对于上面的布局，如果强行分成两列进行布局，是不合适的。所以我用绝对定位进行布局。由于瀑布中元素的高度不是固定的，所以我必须找到一种方法来获得每个元素的高度，然后确定元素应该放在一整行中，左边还是右边。

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

ltview class = 容器 style = 高度:{ { height } } px" gt lt查看wx:for = ；{ { list } } wx:key = ；索引 style = { { item.style } } class = 包装 gt lt抽象项目= { { item } } / gt； lt/view gt； lt/view gt； ltview wx:if = ；{ { tmp } } class = 计算-区域 gt ltview class = 包装 gt lt抽象项目= { { tmp } } / gt； lt/view gt； lt/view gt；模板相对简单，一个容器容器，然后循环数组，水平呈现一堆包装容器。

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

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

这里有个问题，我们怎么得到里面元素的高度？模板中的Computed-zone就是为了解决这个问题。在将元素放入数组之前，我们在computed-zone中渲染元素，然后通过WXML api得到元素的实际渲染尺寸，这样就可以知道实际渲染的元素的宽度和高度。

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

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

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

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

{//Make setData Promise，方便使用$ setData(data){ return new Promise(resolve = >；{this.setData(data，()= gt{ resolve()；});});}，//获取渲染大小getRect (item) {return this。$ setdata ({tmp: item，})。然后(()= >；{返回新承诺((解决，拒绝)= gt{ const query = this . createselectquery()；//小心使用这个，不要使用wx前缀query . select( # 39；. computed -区域。包装 # 39；).boundingClientRect()；query . exec(ret = gt；{ if(ret[0]){ resolve(ret[0])；} else { reject( # 39；找不到dom！');}});});});}，//添加一个元素，内部使用additem(item){ let tick = this . tick；返回this.getRect(item)。然后(rect = gt{如果(打勾！= = this . tick){ return promise . reject( # 39；剔 # 39；);} const { margin } = this.data设{ height，width } = rectconst window width = this . sysinfo . window width；设[ leftTotal，right total]= this . height；// leftTotal左列高度，rightTotal右列高度，let margin px = this . sysinfo . getpx(margin)；let style = # 39'；if(math . ABS(width -window width) lt；3) {//全屏宽度style = ` left:0；top:${ Math.max(leftTotal，right total)} px；宽度:100%；`;left total = right total = math . max(left total+height，right total+height)；} else if(right total lt；LeftTotal) {//放入右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 = [lefttotal，right total]；//记录最新的左右高度返回此。$ setdata({[target key]:{ data:item，style，}，height: math.max(左合计，右合计)，})；});}，//实际添加元素使用，建立承诺队列，保证顺序一致。add(item){ let pending = this . pending | | promise . resolve()；return this . pending = pending . then(()= gt；{ return this . additem(item)；}).catch(err = gt；{ console . error(err)；this.pending = null抛出err});}，clear(){ this . tick = tick++；this.height = [0，0]；this.pending = nullthis.setData({list: []，height: 0，})；}}使用这个组件时，我们不能通过赋值数组直接渲染元素，而是通过添加(item)组件实例方法。因为我已经实现了队列，所以我可以直接循环add。如果关心状态，就判断最后一个元素的add操作是否完成。

这样实现的瀑布流比较灵活，但是性能消耗不低。有必要逐个获取元素的实际呈现大小。如果要支持窗口大小调整，消耗会很可怕。

对于那些需要看到代码细节的同学，我把实际的演示放在了Github和微信代码片段上。有需要的同学可以试试。

基于上述模型，其实也可以优化为只渲染可见区域内的元素，这样可以大大提高瀑布流的性能。希望有时间的同学可以完善一下。我就叉点赞~ o (▽ ?) D

有关编程的更多信息，请访问:编程视频！！以上是讲一个小程序中如何实现截断瀑布组件的细节。请多关注主机参考其他相关文章！

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

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：谈谈如何在小程序中实现一个截断的瀑布组件(小程序瀑布效果) https://zhujicankao.com/74439.html