uniapp 小程序瀑布流

### uniapp小程序中的瀑布流布局实现 在uni-app中实现瀑布流布局可以通过自定义组件或者利用现有的开源组件完成。以下是基于已有引用内容以及专业知识的一种实现方案。 #### 1. 页面结构设计 页面的核心在于`<scroll-view>`和动态计算列高差的逻辑。以下是一个完整的模板示例： ```html <template> <view class="container"> <!-- 可滚动区域 --> <scroll-view scroll-y class="waterfall-container" @scrolltolower="loadMore"> <!-- 左右两列容器 --> <view :style="{ height: columnHeight[0] + 'px' }" class="column"> <block v-for="(item, index) in leftList" :key="'left-' + index"> <view class="card-item">{{ item.text }}</view> </block> </view> <view :style="{ height: columnHeight[1] + 'px' }" class="column"> <block v-for="(item, index) in rightList" :key="'right-' + index"> <view class="card-item">{{ item.text }}</view> </block> </view> </scroll-view> </view> </template> ``` 此部分的设计灵感来源于现有瀑布流实现[^2]，并进行了优化以适应更灵活的数据绑定需求。 --- #### 2. 数据处理与高度管理 为了实现真正的瀑布流效果，需要动态维护两个列表的高度差异，并将数据分配到较短的一侧。核心逻辑如下： ```javascript export default { data() { return { allItems: [], // 所有数据源 leftList: [], // 左边栏数据 rightList: [], // 右边栏数据 columnHeight: [0, 0], // 记录左右两侧当前总高度 }; }, methods: { distributeItem(item) { const minHeightIndex = this.columnHeight[0] <= this.columnHeight[1] ? 0 : 1; if (minHeightIndex === 0) { this.leftList.push(item); this.columnHeight[0] += item.height || 200; // 假设默认高度为200 } else { this.rightList.push(item); this.columnHeight[1] += item.height || 200; } }, loadMore() { // 模拟加载更多数据 setTimeout(() => { const newData = Array.from({ length: 10 }, (_, i) => ({ text: `Item ${this.allItems.length + i}`, height: Math.floor(Math.random() * 150) + 100, })); this.allItems = [...this.allItems, ...newData]; this.updateLayout(); }, 500); }, updateLayout() { this.leftList = []; this.rightList = []; this.columnHeight = [0, 0]; this.allItems.forEach((item) => this.distributeItem(item)); }, }, }; ``` 这段代码实现了动态分发数据至左、右侧的功能，并记录每列的实际高度以便后续调整[^1]。 --- #### 3. 样式设置 样式方面需注意卡片之间的间距及整体布局对齐问题： ```css .container { display: flex; } .waterfall-container { width: 100%; padding: 10rpx; box-sizing: border-box; } .column { width: 50%; /* 占据一半宽度 */ float: left; margin-right: 1%; } .card-item { background-color: #f8f8f8; margin-bottom: 10rpx; padding: 10rpx; } ``` 以上CSS确保了瀑布流的整体视觉效果一致且美观。 --- #### 4. 动态加载功能 当用户滑动到底部时触发`@scrolltolower`事件，从而调用`loadMore()`函数模拟异步请求新数据的过程。这一步骤对于提升用户体验至关重要[^1]。 --- ### 总结 通过上述方法可以高效地构建一个支持动态加载的uni-app小程序瀑布流组件。该解决方案融合了响应式布局理念与性能优化策略，在实际项目中有较高的应用价值。