更新记录

1.0.5（2026-01-16） 下载此版本

本页面是一个基于 UniApp + Vue2 开发的移动端瀑布流列表展示页。采用两列瀑布流布局，复刻了主流二手房交易平台的 UI 视觉效果，并针对移动端性能进行了图片加载优化。

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

平台兼容性

其他

列表瀑布流功能说明文档

1. 页面概览

本页面是一个基于 UniApp + Vue2 开发的移动端瀑布流列表展示页。采用两列瀑布流布局，复刻了主流二手房交易平台的 UI 视觉效果，并针对移动端性能进行了图片加载优化。

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. 交互逻辑说明

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 异步请求。