uniapp 实现瀑布流布局 (网上找不到合适的方法 就进来看看我的吧)

最近自己在开发一款小程序,目的是为了学习,包括后端 也是我自己在写 后端用的是Ruoyi框架

小程序这边呢 原生的我会 uniapp 久闻大名 却从未试手 于是选择了uniapp写微信小程序

话不多说 内容展示的时候 我选择了使用小红书 咸鱼等都在使用的瀑布流布局,出于两个原因

1 个人觉得很好看

2 对于图片的展示很到位 我做的是一个球场类的小程序 球场图片横着拍 竖着拍的都有 那么这种情况下

只有保证宽度一致 高度自适应的方式 才能让图片既不变形 又能在显示区域内 完全显示 不留空白

在web端做一个瀑布流布局是很简单的 大家都知道 css + js 定位 维护高度列表....

但是在uniapp这边 尤其是还要顾着小程序/h5/app等 可以使用的方法就不多了,我在写之前也是

各种百度 各种ai 但是我得到的信息 真的很少 也有 但是我觉得有点复杂(要维护图片高度的列表 还要计算图片下面标题所占的行数 万一我标题下面还有其他东西呢 又得计算一大堆) 不是我想要的 于是决定自己写了

看图:

在这里插入图片描述

这两个大框框外还有一个盒子 相对定位 这两个大框框绝对定位到如图

然后维护两个数据list 每次先判断左右两个大盒子的高度 那个高度小 就往哪个里面的list push数据

这样的方式有如下几个好处:

1 不用维护高度的列表

2 不用提前加载图片 去获取图片的宽高 避免了加载慢以及频繁获取图片宽高带来的闪屏的影响

3 每个小框框里面的内容不限 你可以放任何你想放的东西 标题也可以取得很长 因为我们是根据大框框的高度 来放元素的

4 代码简单 逻辑易懂

下面是一些核心的代码

<div class="container">
		<div class="left">
			<div v-for="item in leftList" :key="item.id" class="containerItem">
				<div style="width: 100%;position: relative;">
					<image :src="item.courtImage" style="width: 100%;" mode="widthFix"></image>
					<span class="priceShowSpan" :class="!item.price ? '' :'needMoney'">
						{{!item.price?'免费':item.price + '元/人'}}
					</span>
				</div>
				<div>
					{{item.courtName}}
				</div>
			</div>
		</div>
		<div class="right">
			<div v-for="item in rightList" :key="item.id" class="containerItem">
				<div style="width: 100%">
					<image :src="item.courtImage" style="width: 100%;" mode="widthFix"></image>
				</div>
				<div>
					{{item.courtName}}
				</div>
			</div>
		</div>
	</div>
mounted(){
		  this.getHeight(".left",".right")
	  },
	  methods:{
		 getHeight(selector1,selector2) {
		    const query = uni.createSelectorQuery().in(this);
			query.select(selector1).boundingClientRect(data => {
				// 第一个高度
				let leftheight = data.height
				
				const query2 = uni.createSelectorQuery().in(this);
				query2.select(selector2).boundingClientRect(data => {
					// 第二个高度
					let rightheight = data.height
					this.insertToList(leftheight,rightheight)
				}).exec();
			}).exec();
		 },
		 insertToList(left,right){
			 console.log(left,right)
			 if(left <= right){
				 this.leftList.push(this.listRender[this.insertIndex])
			 }else{
				 this.rightList.push(this.listRender[this.insertIndex])
			 }
			 this.insertIndex++
			 if(this.insertIndex != this.listRender.length){
				 this.getHeight(".left",".right")
			 }
		 }
	  }
	}
.container{
    width: 100%;
	position: relative;
}
.containerItem{
    display: flex;
    flex-direction: column;
    align-items: center;
	border-radius: 5px;
	border:1px solid #ffffff;
	overflow: hidden;
	margin: 10px 0;
	box-shadow: 1px 1px 20px 1px #2A3A30;
}
.left{
	position: absolute;
	left:0%;
	width: 49%;
}
.right{
	position: absolute;
	left:51%;
	width: 49%;
}

如此这般 你就得到了一个瀑布流布局

看一下效果还是:

在这里插入图片描述

看到这里了 希望能够帮到你

如此这般 你就得到了一个瀑布流布局

看一下效果还是:

[外链图片转存中...(img-Csg1FdPT-1725338302496)]

看到这里了 希望能够帮到你

我这个呢 目前是在开发阶段 没有测试数据很多 以及 下拉加载的情况
如果有朋友用了我的方法 有任何问题 我们可以一起讨论 感谢感谢

posted @   前端小李子  阅读(429)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
点击右上角即可分享
微信分享提示