uniapp项目实践总结(十八)自定义多列瀑布流组件
导语:有时候展示图片等内容,会遇到图片高度不一致的情况,这时候就不能使用等高双列或多列展示了,这时候会用到瀑布流的页面布局,下面就一起探讨一下瀑布流的实现方法。
目录
- 准备工作
- 原理分析
- 实战演练
- 案例展示
准备工作
- 在
pages/index
文件夹下面新建一个waterfall.vue
的组件; - 按照前面文章所说的页面结构,编写好预定的瀑布流案例页面;
- 在网上找几张免费的图片素材;
原理分析
主要是根据图片的高度自动比较每列的总高度,根据uni.getImageInfo
获取到图片高度,然后哪列低,就给哪列补充图片,直至图片列表循环完毕。
实战演练
模板使用
下面就是循环列和图片。
<view class="waterfall-page"> <view class="waterfall-page-column" v-for="(item, index) in waterfall.columnList" :key="index" ref="column" > <view class="waterfall-page-item" v-for="(pItem, pIndex) in item" :key="pIndex" > <image class="waterfall-page-img" :src="pItem" mode="widthFix"></image> </view> </view> </view>
样式编写
.waterfall-page { display: flex; align-items: flex-start; .waterfall-page-column { box-sizing: border-box; flex: 1; padding: 0 10rpx; width: 0; .waterfall-page-item { margin-bottom: 10rpx; .waterfall-page-img { display: inline-block; width: 100%; } } } }
脚本使用
- 定义数据
// 瀑布流信息 const waterfall = reactive({ // 图片列表 imgList: [ "/static/image/waterfall/pic-01.jpg", "/static/image/waterfall/pic-07.jpg", "/static/image/waterfall/pic-03.jpg", "/static/image/waterfall/pic-07.jpg", "/static/image/waterfall/pic-05.jpg", "/static/image/waterfall/pic-07.jpg", "/static/image/waterfall/pic-01.jpg", "/static/image/waterfall/pic-03.jpg", "/static/image/waterfall/pic-07.jpg", ], columnList: [], // 每列图片 columnHeight: [], // 每列图片高度 columnCount: 2, // 总列数 });
- 初始化数据
// 初始化数据 function initData() { for (var i = 0; i < waterfall.columnCount; i++) { waterfall.columnList.push([]); waterfall.columnHeight.push(0); } }
- 计算方法
// 设置瀑布流布局 async function setWaterfallLayout() { for (var i = 0; i < waterfall.imgList.length; i++) { let item = waterfall.imgList[i]; try { let imgInfo = await uni.getImageInfo({ src: item, }), h = imgInfo.height; for (let j = 0; j < waterfall.columnCount - 1; j++) { let prevIndex = j, nextIndex = j + 1; if ( waterfall.columnHeight[prevIndex] <= waterfall.columnHeight[nextIndex] ) { waterfall.columnList[prevIndex].push(item); waterfall.columnHeight[prevIndex] += h; } else { waterfall.columnList[nextIndex].push(item); waterfall.columnHeight[nextIndex] += h; } } } catch (error) { console.log(error); } } }
案例展示
-
h5 端效果
-
小程序端效果
-
APP 端效果
最后
以上就是自定义多列瀑布流组件的主要内容,有不足之处,请多多指正。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)