鸿蒙OSUniApp 制作动态加载的瀑布流布局#三方框架 #Uniapp

使用 UniApp 制作动态加载的瀑布流布局

前言

最近在开发一个小程序项目时，遇到了需要实现瀑布流布局的需求。众所周知，瀑布流布局在展示不规则尺寸内容（如图片、商品卡片等）时非常美观和实用。但在实际开发过程中，我发现普通的 flex 或 grid 布局很难满足这一需求，尤其是当需要配合上拉加载更多功能时，更是增加了实现难度。

经过一番摸索和实践，我总结出了一套在 UniApp 中实现动态加载瀑布流布局的方案，希望能给大家提供一些参考和帮助。

瀑布流布局原理

瀑布流布局的核心思想是：将元素按照自上而下的方式依次排列，但不是简单地一列一列排，而是始终将新元素放置在当前高度最小的那一列，这样就能保证各列高度尽可能接近，整体视觉效果更加协调。

技术实现思路

在 UniApp 中实现瀑布流布局，我尝试过以下几种方案：

1. 使用原生 CSS 的 column 属性
2. 使用 flex 布局模拟
3. 使用 JavaScript 计算每个元素的位置

最终我选择了第三种方案，因为它具有最好的兼容性和最大的灵活性，特别是在处理动态加载数据时。

具体实现步骤

1. 页面结构设计

首先，我们需要创建一个基本的页面结构：

<template><view class="waterfall-container"><view class="waterfall-column" v-for="(column, columnIndex) in columns" :key="columnIndex"><view class="waterfall-item" v-for="(item, itemIndex) in column" :key="item.id"@click="handleItemClick(item)"><image class="item-image" :src="item.imageUrl" :style="{ height: item.height + 'rpx' }"mode="widthFix"@load="onImageLoad(item, columnIndex, itemIndex)"/><view class="item-content"><text class="item-title">{{ item.title }}</text><view class="item-info"><text class="item-price">¥{{ item.price }}</text><text class="item-likes">{{ item.likes }}赞</text></view></view></view></view></view>
</template>

2. 数据结构和状态管理

<script>
export default {data() {return {columns: [[], []], // 默认两列瀑布流columnHeights: [0, 0], // 记录每列的当前高度page: 1,loading: false,hasMore: true,dataList: []};},onLoad() {this.loadInitialData();},// 上拉加载更多onReachBottom() {if (this.hasMore && !this.loading) {this.loadMoreData();}},methods: {async loadInitialData() {this.loading = true;try {const result = await this.fetchData(1);this.dataList = result.data;this.arrangeItems(this.dataList);this.hasMore = result.hasMore;this.page = 1;} catch (error) {console.error('加载数据失败：', error);uni.showToast({title: '加载失败，请重试',icon: 'none'});} finally {this.loading = false;}},async loadMoreData() {if (this.loading) return;this.loading = true;uni.showLoading({title: '加载中...'});try {const nextPage = this.page + 1;const result = await this.fetchData(nextPage);if (result.data && result.data.length > 0) {this.dataList = [...this.dataList, ...result.data];this.arrangeItems(result.data);this.page = nextPage;this.hasMore = result.hasMore;} else {this.hasMore = false;}} catch (error) {console.error('加载更多数据失败：', error);uni.showToast({title: '加载失败，请重试',icon: 'none'});} finally {this.loading = false;uni.hideLoading();}},// 模拟从服务器获取数据fetchData(page) {return new Promise((resolve) => {setTimeout(() => {// 模拟数据，实际项目中应该从服务器获取const mockData = Array.from({ length: 10 }, (_, i) => ({id: page * 100 + i,title: `商品${page * 100 + i}`,price: Math.floor(Math.random() * 1000 + 100),likes: Math.floor(Math.random() * 1000),imageUrl: `https://picsum.photos/200/300?random=${page * 100 + i}`,height: Math.floor(Math.random() * 200 + 200) // 随机高度，让瀑布流效果更明显}));resolve({data: mockData,hasMore: page < 5 // 模拟只有5页数据});}, 1000);});},// 核心算法：将新项目添加到高度最小的列中arrangeItems(items) {items.forEach(item => {// 找出当前高度最小的列const minHeightIndex = this.columnHeights.indexOf(Math.min(...this.columnHeights));// 将项目添加到该列this.columns[minHeightIndex].push(item);// 更新该列的高度（这里用item.height加上内容区域的估计高度）this.columnHeights[minHeightIndex] += (item.height + 120); // 120是内容区域的估计高度});},// 图片加载完成后，调整列高度计算onImageLoad(item, columnIndex, itemIndex) {// 这里可以根据实际加载后的图片高度重新计算列高度// 真实项目中可能需要获取图片实际渲染高度console.log('图片加载完成', item.id);},handleItemClick(item) {uni.navigateTo({url: `/pages/detail/detail?id=${item.id}`});}}
};
</script>

3. 样式设计

<style lang="scss">
.waterfall-container {display: flex;padding: 20rpx;box-sizing: border-box;background-color: #f5f5f5;
}.waterfall-column {flex: 1;display: flex;flex-direction: column;&:first-child {margin-right: 10rpx;}&:last-child {margin-left: 10rpx;}
}.waterfall-item {background-color: #ffffff;border-radius: 12rpx;margin-bottom: 20rpx;overflow: hidden;box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);transition: transform 0.3s;&:active {transform: scale(0.98);}
}.item-image {width: 100%;display: block;
}.item-content {padding: 16rpx;
}.item-title {font-size: 28rpx;color: #333;margin-bottom: 12rpx;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;
}.item-info {display: flex;justify-content: space-between;align-items: center;
}.item-price {font-size: 32rpx;color: #ff4b2b;font-weight: bold;
}.item-likes {font-size: 24rpx;color: #999;
}
</style>

优化与进阶

1. 图片懒加载

为了优化性能，特别是在图片较多的情况下，我们可以实现图片的懒加载功能。UniApp提供了lazyLoad属性，配合scrollview可以很容易实现：

<image class="item-image" :src="item.imageUrl" :style="{ height: item.height + 'rpx' }"mode="widthFix"lazy-load@load="onImageLoad(item, columnIndex, itemIndex)"
/>

2. 列数动态调整

针对不同屏幕尺寸，我们可以动态调整瀑布流的列数：

data() {return {columns: [],columnHeights: [],columnCount: 2, // 默认列数// 其他数据...};
},
onLoad() {// 获取设备信息，动态设置列数const systemInfo = uni.getSystemInfoSync();// 如果是平板等大屏设备，可以显示更多列if (systemInfo.windowWidth > 768) {this.columnCount = 3;}// 初始化列数据this.columns = Array.from({ length: this.columnCount }, () => []);this.columnHeights = Array(this.columnCount).fill(0);this.loadInitialData();
}

3. 下拉刷新

结合UniApp的下拉刷新功能，我们可以很容易实现列表刷新：

// 页面配置
export default {enablePullDownRefresh: true,// ...其他配置
}// 方法实现
onPullDownRefresh() {this.resetAndReload();
},resetAndReload() {// 重置数据this.columns = Array.from({ length: this.columnCount }, () => []);this.columnHeights = Array(this.columnCount).fill(0);this.page = 1;this.hasMore = true;this.dataList = [];// 重新加载this.loadInitialData().then(() => {uni.stopPullDownRefresh();});
}

实际应用案例

我在一个电商类小程序的商品列表页面应用了这种瀑布流布局，效果非常好。用户反馈说浏览商品时比传统的列表更加舒适，能够在同一屏幕内看到更多不同的商品，提升了浏览效率。

特别是对于衣服、家居用品等视觉信息很重要的商品，瀑布流布局可以根据商品图片的实际比例来展示，避免了固定比例裁剪可能带来的信息丢失，商品展示效果更佳。

遇到的问题与解决方案

1. 图片加载速度不一致导致布局跳动

问题：由于网络原因，图片加载速度可能不一致，导致已计算好位置的元素在图片加载后发生位置变化。

解决方案：预设图片高度，或者使用骨架屏占位，在图片完全加载后再显示真实内容。

<view class="waterfall-item"><view v-if="!item.imageLoaded" class="skeleton-image" :style="{ height: item.height + 'rpx' }"></view><image v-elseclass="item-image" :src="item.imageUrl" :style="{ height: item.height + 'rpx' }"mode="widthFix"/><!-- 内容部分 -->
</view>

2. 性能优化

在数据量很大时，可能会出现性能问题。我的解决方案是：

1. 使用虚拟列表，只渲染可见区域的元素
2. 分批次添加数据，而不是一次性添加所有数据
3. 对于复杂计算，使用防抖和节流技术

// 分批次添加数据
arrangeItemsInBatches(items) {const batchSize = 5;const totalItems = items.length;let processedCount = 0;const processBatch = () => {const batch = items.slice(processedCount, processedCount + batchSize);this.arrangeItems(batch);processedCount += batch.length;if (processedCount < totalItems) {setTimeout(processBatch, 50);}};processBatch();
}

总结

通过在UniApp中实现动态加载的瀑布流布局，我们可以为用户提供更好的视觉体验和浏览效率。这种布局特别适合展示不规则尺寸的内容，如图片、商品卡片等。

实现这种布局的关键在于：

1. 正确计算每列的高度并动态分配新元素
2. 处理好图片加载和元素高度计算的问题
3. 结合动态加载实现无限滚动效果
4. 针对性能问题进行优化

希望这篇文章对你在UniApp中实现瀑布流布局有所帮助。如果有任何问题或建议，欢迎在评论区交流讨论！

参考资料

1. UniApp官方文档：https://uniapp.dcloud.io/
2. 瀑布流布局原理：https://www.w3cplus.com/css/pure-css-create-masonry-layout.html