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 端效果
    image
    image

  • 小程序端效果
    image
    image

  • APP 端效果
    image
    image

最后

以上就是自定义多列瀑布流组件的主要内容,有不足之处,请多多指正。

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