uniapp｜实现商品分类与列表数据联动，左侧菜单右侧商品列表(瀑布流、高度自动计算、多端兼容)

基于uniapp实现商品分类与商品列表数据联动，提供完整代码与常见问题解决方案，通过实战案例演示，快速构建商品列表交互，开箱即用。

前言

应用场景介绍

商品列表的左右联动布局（左侧分类菜单 + 右侧商品列表）是移动端和桌面端常见的交互设计，尤其在以下场景中广泛应用：

1. 电商平台

• 分类浏览：用户通过左侧菜单快速切换商品分类（如“手机”“家电”“服饰”），右侧实时展示对应商品，提升筛选效率。
• 多级联动：适用于二级分类（如“手机→品牌→价格区间”），但本文以基础一级分类为例。
• 示例：美团外卖商家页、京东超市商品分类。