HarmonyOS7尾部吸附综合页实战：End 吸附策略与多配置综合演示

前言

把 End 吸附单独拿出来讲是一回事，把它和其他配置一起放进完整案例里又是另一回事。这个页面更适合做“最后验收”，帮助你判断吸附参数在真实页面里的组合结果。 我一直觉得，好示例不一定代码多，但一定能把“为什么要这么写”交代清楚。尾部吸附综合页 这个页面就属于这种，值得停下来认真拆一遍。

如果把这页当成练习材料，我会优先看它怎样围绕 End 吸附策略与多配置综合演示 组织页面。因为这一层想清楚了，后面的代码基本就不会散。

这类写法尤其适合落在 高级列表页、组件实验台、滚动效果比对 这些场景里，所以我下面不会只讲“组件怎么写”，而是更关心“放进页面之后为什么这样组织”。

这页的阅读顺序我建议这样走

很多人学示例会直接复制 UI 代码，结果复刻出来是像的，但后面一改就散。原因通常不是代码抄错了，而是结构关系没先看懂。

这一页没有额外拆出接口，页面更多是直接围绕基础数据和组件参数展开。

我会把它当成真实业务页面来拆，重点看哪些写法可以直接迁到项目里，哪些只是示例环境下的轻量实现。

综合演示最值得看的是模式切换

这页的snapMode才是真正的控制轴。它把 START、CENTER、END 三种停靠策略收进同一个状态里，让用户可以在一页里直接感受不同吸附模式的差异。

这里可以按这条线理解：

• snapMode = 0时偏向起始对齐，适合列表式浏览。

• snapMode = 1时偏向中心聚焦，适合强调当前项。
• snapMode = 2时偏向尾部停靠，适合特殊布局或反向视觉节奏。

所以这页不只是 End 模式示例，更像一个吸附策略实验台。它让你在同一组数据上比较不同停靠点带来的体感差异。

我会优先读的就是这几段逻辑

示例代码里最怕被忽略的，就是那些看起来普通、实际上掌控页面节奏的方法。这里建议优先把它们摸清。

• 这个案例没有太多额外方法，核心价值主要集中在页面结构和组件组合方式。

我自己读这类方法时，通常只抓一条线：谁触发、谁被改、页面哪里立刻有反馈。把这三件事连起来，很多交互代码一下就顺了。

第一段关键代码：页面是怎么被带起来的

这一段建议慢一点看。它通常决定了页面初始状态，也决定了后续哪些区域会跟着刷新。

@StateisShow:boolean=true@StatesnapMode:number=0build(){Column(){if(this.isShow){Column(){Text('ScrollSnap END 吸附 + 综合演示').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FF6B9D').margin({bottom:4})Text('snapAlign(ScrollSnapAlign.END) 吸附到底部，点击切换模式').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).margin({bottom:12})}.width('100%').alignItems(HorizontalAlign.Start)Row(){ForEach(['START','CENTER','END'],(mode:string,idx:number)=>{Button(mode).fontSize(12).height(32).backgroundColor(this.snapMode===idx?DEMO_THEME_COLOR:'#E0E0E0').fontColor(this.snapMode===idx?'#FFFFFF':'#666666').borderRadius(6).onClick(()=>{this.snapMode=idx}).margin({right:8})})

这一段我通常不会一下翻过去，而是先确认下面这几个判断点：

• @State字段到底在控制显示、选择、跳转结果还是模式切换。
• 默认值是不是合理，页面一打开会不会就落在一个可理解的状态上。
• 字段命名能不能让后来的人一眼看懂用途，而不是还要翻半天 UI。

第二段关键代码：真正决定交互手感的地方

这段代码最重要的是snapMode的切换入口。三个按钮不是装饰，而是在同一套内容上切换不同吸附策略，让用户直接比较 START、CENTER、END 的停靠差异。

.onClick(()=>{this.snapMode=idx}).margin({right:8})})}.width('100%').margin({bottom:12})Scroll(){Column(){ForEach(PRESET_COLORS.slice(0,7),(item:ColorConfig,index:number)=>{Row(){Column(){Text(''+(index+1)).fontSize(36).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')Text(item.name).fontSize(13).fontColor('rgba(255,255,255,0.8)').margin({top:4})}.alignItems(HorizontalAlign.Center)Text(item.value).fontSize(10).fontColor('rgba(255,255,255,0.5)').margin({left:16})}.width('100%').height(130).backgroundColor(item.value).borderRadius(14).padding(16).justifyContent(FlexAlign.SpaceBetween).margin({bottom:10})})}.padding({left:4,right:4})}.width('100%').height(380)

代码读到这里，我通常会顺手补三件事，不然后面很容易只看热闹：

1. 这个交互入口接收的到底是什么输入。
2. 输入进来之后，代码改了哪个状态，或者触发了哪次导航。
3. 变化发生后，用户最先感知到的反馈会落在哪个区域。

这三个问题串起来之后，这一页基本就不只是“看过”，而是真的读懂了。

真要学会用，自己过一遍这条操作线

第一次接触这个案例时，不要急着扩展功能。先把默认状态和一次完整交互跑顺，后面加东西才不会歪。

1. 先进入页面，确认首屏是不是把尾部吸附综合页的主题交代清楚。
2. 盯住核心展示区，观察默认状态下最醒目的内容是什么。
3. 主动触发一次关键交互，比如点击、滑动、跳转、返回、切换或者选择。
4. 回头检查状态区、提示区、标题区或者附属信息有没有跟着变化。
5. 最后再打开源码，对照刚才那次交互，把状态变化链路串起来。

如果这五步你能边操作边说清楚页面发生了什么，后面再换成自己的数据和交互，心里会稳很多。

直接照搬不够，最好再补这几刀

我自己迁示例代码时，最怕的是把展示逻辑和业务逻辑粘成一团。这个案例里有些地方可以提前规避。

• 吸附滚动别只调参数，子项尺寸、容器留白和预览区域通常比 API 本身更影响体感。
• 如果页面同时存在自由浏览和精准停靠两种需求，最好把吸附开关当成正式状态来设计。
• 只要页面里有重复块，就别硬撑着手写到底；早点抽成小组件，后面改样式和改交互都会轻松很多。
• 示例数据最好和布局代码分开放，不然后面一接接口，页面文件很容易立刻变臃肿。

我觉得它真正有价值的地方在这

我会把这类案例当成“工程感比炫技感更强”的材料来留存。后面真的要做同类页面时，能少走不少弯路。

• 页面结构比较稳，后续不管是换数据还是换皮肤，成本都不会特别高。
• 状态数量总体可控，适合拿来练“一个页面里如何分配职责”这件事。
• 组件参数和页面目标之间关系比较直观，不太会出现“能跑但看不懂为什么这么配”的情况。

完整代码

下面保留整理过命名的完整 ArkTS 代码，方便你直接对照学习。这里已经去掉原始的 Demo 命名，改成了更贴近当前案例语义的名称。

/** * 尾部吸附综合页 */import{PRESET_COLORS,ColorConfig,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from'./types'@Entry@Componentstruct ScrollsnapEndCompleteShowcase{@StateisShow:boolean=true@StatesnapMode:number=0build(){Column(){if(this.isShow){Column(){Text('ScrollSnap END 吸附 + 综合演示').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FF6B9D').margin({bottom:4})Text('snapAlign(ScrollSnapAlign.END) 吸附到底部，点击切换模式').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).margin({bottom:12})}.width('100%').alignItems(HorizontalAlign.Start)Row(){ForEach(['START','CENTER','END'],(mode:string,idx:number)=>{Button(mode).fontSize(12).height(32).backgroundColor(this.snapMode===idx?DEMO_THEME_COLOR:'#E0E0E0').fontColor(this.snapMode===idx?'#FFFFFF':'#666666').borderRadius(6).onClick(()=>{this.snapMode=idx}).margin({right:8})})}.width('100%').margin({bottom:12})Scroll(){Column(){ForEach(PRESET_COLORS.slice(0,7),(item:ColorConfig,index:number)=>{Row(){Column(){Text(''+(index+1)).fontSize(36).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')Text(item.name).fontSize(13).fontColor('rgba(255,255,255,0.8)').margin({top:4})}.alignItems(HorizontalAlign.Center)Text(item.value).fontSize(10).fontColor('rgba(255,255,255,0.5)').margin({left:16})}.width('100%').height(130).backgroundColor(item.value).borderRadius(14).padding(16).justifyContent(FlexAlign.SpaceBetween).margin({bottom:10})})}.padding({left:4,right:4})}.width('100%').height(380).scrollBar(BarState.Auto).scrollSnap({snapAlign:this.snapMode===0?ScrollSnapAlign.START:this.snapMode===1?ScrollSnapAlign.CENTER:ScrollSnapAlign.END}).backgroundColor(DEMO_CARD_COLOR).borderRadius(12).padding(12)}Text('尾部吸附综合页 - ScrollSnap END 吸附 + 三种模式切换整合').fontSize(12).fontColor('#999999').margin({top:12})}.width('100%').height('100%').backgroundColor('#F5F6FA').padding(16)}}

收个尾

这个案例没有故意炫技，反而因此更适合学习。页面目标清楚、代码组织也相对直接，拿来练手或者做项目骨架都不亏。