uniapp vue2 瀑布流组件

### uni-app Vue2 瀑布流组件实现 对于 `uni-app` 和 `Vue2` 的瀑布流组件需求，可以基于原生的 HTML/CSS 结合 JavaScript 实现自定义逻辑。以下是具体实现方案： #### 组件结构设计 通过创建一个独立的组件文件（如 `waterfall.vue`），并将其嵌入到项目中使用。 ```html <template> <view class="waterfall-container"> <view v-for="(item, index) in list" :key="index" class="waterfall-item" :class="{ 'column-left': isLeft(index), 'column-right': !isLeft(index) }" @click="handleItemClick(item)"> <image :src="item[imageKey]" mode="aspectFill"></image> <text>{{ item[textKey] }}</text> </view> </view> </template> <script> export default { props: { list: { type: Array, required: true }, imageKey: { type: String, default: 'imageUrl' }, textKey: { type: String, default: 'title' } }, methods: { isLeft(index) { return index % 2 === 0; }, handleItemClick(item) { this.$emit('item-click', item); } } }; </script> <style lang="scss" scoped> .waterfall-container { display: flex; justify-content: space-between; .waterfall-item { width: 48%; margin-bottom: 10px; image { width: 100%; height: auto; border-radius: 5px; } text { font-size: 14px; color: #333; padding-top: 5px; } } .column-left { align-self: flex-start; } .column-right { align-self: flex-end; } } </style> ``` 此代码片段展示了如何构建一个简单的双列瀑布流布局[^3]。它利用了 CSS Flexbox 布局特性以及动态类名分配来控制图片位置。 #### 使用示例 在父页面引入该组件后即可调用其功能。 ```html <template> <view> <waterfall :list="goodsList" imageKey="picUrl" textKey="name" @item-click="onItemClicked"> </waterfall> </view> </template> <script> import Waterfall from './components/Waterfall'; export default { components: { Waterfall }, data() { return { goodsList: [] }; }, onLoad() { this.fetchData(); }, methods: { fetchData() { setTimeout(() => { this.goodsList = [ { picUrl: 'https://example.com/image1.jpg', name: '商品A' }, { picUrl: 'https://example.com/image2.jpg', name: '商品B' }, // 更多数据... ]; }, 1000); }, onItemClicked(item) { console.log(`点击的商品名称为 ${item.name}`); } } }; </script> ``` 以上代码演示了一个完整的加载流程，并绑定了事件监听器用于处理用户交互行为[^4]。 --- ### 注意事项 为了优化性能，在实际开发过程中建议考虑以下几点： - **懒加载**：当列表项较多时，应启用图片懒加载技术减少资源消耗。 - **虚拟滚动**：如果瀑布流高度较大，则需采用 Virtual Scroll 技术提升渲染效率。 - **适配不同屏幕尺寸**：确保样式能够适应各种设备分辨率变化。 ---