企业官网建设流程全解析

前言

peek 效果之所以常见，是因为它能用很少的空间告诉用户：后面还有内容。这个案例把预览露出和吸附停靠组合在一起，很适合做产品感比较强的界面。 这一页适合慢一点读，不是因为代码特别难，而是因为它里面很多决定都和真实页面很像。把这些决定看懂，比把组件名字记住更值钱。

如果把这页当成练习材料，我会优先看它怎样围绕 peek 效果与吸附卡片预览设计 组织页面。因为这一层想清楚了，后面的代码基本就不会散。

这类写法尤其适合落在 推荐卡片、轮播式内容、分组模块预览 这些场景里，所以我下面不会只讲“组件怎么写”，而是更关心“放进页面之后为什么这样组织”。

别急着抄，先认结构

这一类页面看源码最怕的就是“每一段都认识，但拼起来不知道为什么这么摆”。所以这里先从页面骨架讲起，比直接盯属性更省时间。

页面里额外定义的数据模型包括：Item。如果后面准备接接口，我更建议把这些类型继续收口成更直白的业务命名。

这个案例表面看是界面效果，真正该盯的是状态怎么流动，因为大多数可复用价值都藏在这里。

Peek 效果的重点，是让用户知道后面还有内容

这页没有复杂状态，isShow也只是展示开关。真正要看的，是卡片宽度、右侧间距和容器裁切共同制造出的“露出下一张”的效果。

Peek 卡片通常要处理好三件事：

• 当前卡片要足够完整：用户能明确知道现在停靠的是哪一张。
• 下一张要露一点：露出边缘就够了，太多会削弱当前卡片的主次关系。
• 吸附要稳定：滑动结束后停在固定位置，用户才会形成可预期的浏览节奏。

所以 peek 不是单纯炫视觉，而是在用布局暗示“这里可以继续滑”。

时间不多的话，先盯这几个入口

我一般不会把所有方法从上到下读一遍，而是先找“用户动一下之后，页面为什么会变”的那条链路。

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

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

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

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

@StateisShow:boolean=truebuild(){Column(){if(this.isShow){Column(){Text('卡片吸附 - peek 预览效果').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FF6B6B').margin({bottom:4})Text('水平滚动卡片，吸附时露出下一张卡片的边缘').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).margin({bottom:12})}.width('100%').alignItems(HorizontalAlign.Start)Scroll(){Row(){ForEach([{title:'风景',color:'#FF6B6B',emoji:'🏔️'},{title:'美食',color:'#FFA500',emoji:'🍕'},{title:'旅行',color:'#4ECDC4',emoji:'✈️'},{title:'运动',color:'#6BCB77',emoji:'⚽'},{title:'音乐',color:'#9B59B6',emoji:'🎵'},{title:'科技',color:'#4D96FF',emoji:'💻'}],(item:ScrollsnapPeekCardsItem,index:number)=>{Column(){

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

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

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

这段代码要结合卡片宽度和容器空间一起看。当前卡片占据主要区域，但下一张会露出边缘，这个细小预览比文字提示更自然地告诉用户可以继续横滑。

/** * 卡片预览吸附页 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from'./types'interfaceScrollsnapPeekCardsItem{title:stringcolor:stringemoji:string}@Entry@Componentstruct ScrollsnapPeekCards{@StateisShow:boolean=truebuild(){Column(){if(this.isShow){Column(){Text('卡片吸附 - peek 预览效果').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FF6B6B').margin({bottom:4})Text('水平滚动卡片，吸附时露出下一张卡片的边缘').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).margin({bottom:12})

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

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

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

如果你要亲手试，顺序最好别乱

如果你准备把这个案例交给团队里别的人看，我甚至建议直接让对方按下面的顺序自己操作一遍。很多理解偏差都会在这一步消失。

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

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

真放到业务里，我会先改什么

从教程页到业务页，差的从来不只是接口。更多时候，是组件职责、命名和状态来源要重新收拾一遍。

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

它的参考价值不只是把效果跑出来

很多官方示例的价值在于展示组件存在过，但这种页面更进一步：它在展示“组件被放进页面之后怎么活起来”。

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

完整代码

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

/** * 卡片预览吸附页 */import{PRESET_COLORS,generateListItems,DEMO_BG_COLOR,DEMO_CARD_COLOR,DEMO_THEME_COLOR,DEMO_SUBTEXT_COLOR}from'./types'interfaceScrollsnapPeekCardsItem{title:stringcolor:stringemoji:string}@Entry@Componentstruct ScrollsnapPeekCards{@StateisShow:boolean=truebuild(){Column(){if(this.isShow){Column(){Text('卡片吸附 - peek 预览效果').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FF6B6B').margin({bottom:4})Text('水平滚动卡片，吸附时露出下一张卡片的边缘').fontSize(12).fontColor(DEMO_SUBTEXT_COLOR).margin({bottom:12})}.width('100%').alignItems(HorizontalAlign.Start)Scroll(){Row(){ForEach([{title:'风景',color:'#FF6B6B',emoji:'🏔️'},{title:'美食',color:'#FFA500',emoji:'🍕'},{title:'旅行',color:'#4ECDC4',emoji:'✈️'},{title:'运动',color:'#6BCB77',emoji:'⚽'},{title:'音乐',color:'#9B59B6',emoji:'🎵'},{title:'科技',color:'#4D96FF',emoji:'💻'}],(item:ScrollsnapPeekCardsItem,index:number)=>{Column(){Text(item.emoji).fontSize(48).margin({bottom:12})Text(item.title).fontSize(20).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')Text(\`卡片 \${index+1}\`).fontSize(11).fontColor('rgba(255,255,255,0.6)').margin({top:6})Text('← 滑动查看下一张 →').fontSize(9).fontColor('rgba(255,255,255,0.3)').margin({top:20})}.width(250).height(220).backgroundColor(item.color).borderRadius(18).padding(20).justifyContent(FlexAlign.Center).shadow({radius:20,color:'#00000020',offsetY:10}).margin({right:8})})}.padding({left:16,right:16})}.width('100%').height(240).scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).scrollSnap({snapAlign:ScrollSnapAlign.START}).backgroundColor('transparent').borderRadius(12)}Text('卡片预览吸附页 - 卡片吸附：peek 预览下一张卡片').fontSize(12).fontColor('#999999').margin({top:12})}.width('100%').height('100%').backgroundColor('#F5F6FA').padding(16)}}

收个尾

如果你最近正好要做 推荐卡片、轮播式内容、分组模块预览，那这篇可以直接当起步模板。先跑通，再替换数据和交互，效率会比从空白页起步高很多。