羽球联盟 HarmonyOS NEXT 实战系列 (14/20)：装备资讯分类与本地兜底合并策略

2026/7/7 1:20:24

文章导读

装备页不仅展示列表，还要按球拍、球鞋、球包、配件、穿线等类别切换。
远程抓取到的装备数据可能类别不全，因此列表页会把本地未覆盖类目补进来。
刷新、分类、空态和详情跳转需要在同一页内保持逻辑一致。

页面效果

装备资讯页的体验目标很明确：用户既能快速浏览最新装备内容，也能立刻切到自己关心的类别。球拍用户和球鞋用户的关注点不同，如果只有一个总列表，页面会显得“信息很多，但定位很慢”。

分类 Tab 在这里不只是视觉切换，它直接决定了用户是否愿意继续用这页浏览内容。为了保证类别切换后始终有东西可看，项目没有完全依赖远程抓取，而是让本地装备数据承担一部分类目兜底职责。

实战拆解

EquipmentListPage的实现里有一个非常实用的策略：如果远程装备列表为空，直接使用本地EQUIPMENTS；如果远程列表存在，就先统计远程已经覆盖了哪些类别，再把本地中未被覆盖的类别补到后面。这样一来，远程数据能体现时效性，本地数据又能保证类别完整度。

这个策略特别适合装备场景。因为远程资讯往往更偏新闻流，不一定每次都同时覆盖球拍、球鞋、球包、配件、穿线所有类别。如果完全相信抓取结果，某些类别切过去就是空白；但如果本地兜底补上，用户至少还能浏览到稳定的基础内容。

页面结构本身保持得很干净：顶部是NavBar，下面是可滚动的SegmentTab，正文区域则在Refresh中渲染列表。分类切换只依赖selected和cats映射，不需要在页面里写很多额外状态。换句话说，这一页的难点不在 UI，而在“如何让远程数据的不完整不会直接伤害界面体验”。

关键代码

privatesource():Equipment[]{if(this.remoteEquipment.length===0){returnEQUIPMENTS;}constremoteCats:Set<string>=newSet();for(consteofthis.remoteEquipment){remoteCats.add(e.category);}constsupplement:Equipment[]=EQUIPMENTS.filter((e:Equipment)=>!remoteCats.has(e.category));if(supplement.length===0){returnthis.remoteEquipment;}constmerged:Equipment[]=[];for(consteofthis.remoteEquipment){merged.push(e);}for(consteofsupplement){merged.push(e);}returnmerged;}privatefiltered():Equipment[]{constsrc:Equipment[]=this.source();if(this.selected===0){returnsrc;}constcat:string=this.cats[this.selected];returnsrc.filter((e:Equipment)=>e.category===cat);}