UNIAPP移动端瀑布流列表，支持APP、微信小程序、H5

下载地址：https://ext.dcloud.net.cn/plugin?id=26588

1. 页面概览

本页面是一个基于 UniApp + Vue2 开发的移动端瀑布流列表展示页。采用两列瀑布流布局，并针对移动端性能进行了图片加载优化。

2. 技术规格

• 开发框架：UniApp (Vue2 Options API)
• 样式处理：SCSS
• 布局模式：Flexbox 响应式布局 + 左右双列算法
• 渲染模式：原生渲染，兼容 H5、微信小程序及 App 端

---

3. 核心功能模块

3.1 导航模块 (Navigation Tabs)

• 多状态切换：支持分类切换。
• 视觉反馈：通过下划线高亮显示当前激活状态。
• 联动刷新：切换分类时自动清空当前数据，触发下拉刷新逻辑，重置分页索引。

3.2 瀑布流布局 (Waterfall Layout)

• 双列分配 ：采用实时长度对比算法。在插入新数据前，对比 leftList 与 rightList 的数组长度，将新项推入较短的一列，确保两列平衡。
• 自适应高度 ：利用图片组件的 widthFix 模式，由内容自然撑开高度，实现错落有致的瀑布流感。

3.3 图片加载优化 (Image Optimization)

• 原生懒加载 ：启用 lazy-load 属性，仅在图片滚动至视口附近时发起网络请求。
• 渐现动画 (Fade-in) ：图片加载完成后，通过监听 @load 事件切换 CSS 透明度，避免瞬间闪现。
• 骨架占位：在图片未完成加载时，显示灰色背景色块，维持页面布局稳定，防止高度塌陷带来的视觉跳动。
• 异常捕获 ：通过 @error 监听图片加载失败状态，并自动替换为预设的默认图。

---

4. 交互逻辑说明

交互动作	触发逻辑	业务效果
下拉刷新	onPullDownRefresh	重置 page=1，清空现有列表，重新获取数据。
触底加载	onReachBottom	分页索引 page++，追加数据到现有列表末尾。
瀑布流列表点击	@click	触发 handleDetail 方法，控制台打印瀑布流列表 ID，便于后续跳转路由跳转。
加载提示	数据监听	根据 loading 和 allLoaded 状态展示"加载中"或"没有更多了"。

---

5. 数据结构定义

{
  "id": "String (唯一标识)",
  "title": "String (瀑布流列表核心卖点描述)",
  "image": "String (图片URL)",
  "location": "String (地理位置标签)",
  "rooms": "String (户型, e.g. 3室2厅)",
  "area": "Number/String (建筑面积)",
  "direction": "String (朝向)",
  "isSpecial": "Boolean (是否展示特价标签)",
  "totalPrice": "Number (总价/万元)",
  "unitPrice": "Number (单价/元/平)",
  "loaded": "Boolean (前端状态控制：图片是否已加载)"
}

---

6. 后续扩展建议

1. 动态高度计算 ：当前通过数组长度平衡列高，后续可改为在 @load 后通过 uni.createSelectorQuery 获取 DOM 实际高度来决定下一张图的去向，实现更精准的对齐。
2. 筛选器增强：在导航栏下方增加区域、价格、户型等组合筛选菜单。
3. 大图预览：增加点击瀑布流列表图片弹出全屏大图预览的功能。
4. 接口对接 ：目前为 Mock 数据，建议在 fetchData 中接入标准的 uni.request 异步请求。

---