前言：别慌，走马灯卡片其实挺好玩

说实话，我一开始也懵逼。

kan着 ArkUI 那堆官方文档，感觉像在读外星语。

哈哈，别急，咱们慢慢聊。

先把需求敲清楚——一个Neng自动滚动、手指还Neng随意滑动的卡片。

对，就是那种左滑右滑dou不卡顿，还Neng在用户抬手后暂停几秒再继续的走马灯。

hen多小伙伴会想直接用 Marquee。

可是 Marquee 只适合单行文字滚动，咱这卡片里还有圆角、阴影、按钮啥的。

所以选 Swiper。

Swiper 本身支持 autoPlay、loop、interval、duration，还Neng自定义曲线 Curve.Linear，让动画匀速滑过去。

这几个属性配好，就NengZuo到“kan不见停顿”的效果。

@ComponentV2
export struct MarqueeCard {
  @Param topList: string = 
  @Param bottomList: string = 
  @Param isPaused: boolean = false
  @Event onItemClick?: Callback
  private readonly ITEM_SPACE = 8
  private readonly PLAY_DURATION = 6000
  private readonly PLAY_INTERVAL = 2000
  build {
    Column {
      // 上排 Swiper
      Swiper
        .forEach => this.itemBuilder)
        .autoPlay
        .interval
        .duration
        .curve
        .onTouch
      // 下排 Swiper
      Swiper
        .forEach => this.itemBuilder)
        .autoPlay
        .interval
        .duration
        .curve
        .onTouch
    }
    .width
    .height
    .padding
    .backgroundColor
    .borderRadius
    .clip
  }
  @Builder
  itemBuilder {
    Row {
      Text.fontSize.fontColor
      Blank.layoutWeight
      Text.fontSize.fontColor
    }
    .height
    .backgroundColor
    .borderRadius
    .shadow
    .onClick => this.onItemClick?.)
  }
  private handleTouch {
    if  this.isPaused = true
    if  {
      setTimeout => { this.isPaused = false }, 3000)
    }
  }
}

咱们要Zuo到“手指一按就停”，不Neng让动画一直跑着。

这里用 TouchEvent 的 Down/Up/Cancel 来切换 isPaused 状态。

记得在 Up 或 Cancel 后用 setTimeout 再恢复自动播放，这样用户滑完后还Nengkan到继续滚动的效果。

别把这个逻辑写进 onClick，那是点了才触发，根本不符合需求。

说实话，有时候你把完整的 TS/JS 示例直接塞进页面搜索引擎会觉得页面内容“重复”或者“缺乏可读性”。

另外Ru果页面没有足够的文字解释，而只有代码块，爬虫可Neng就跳过去了。

解决办法：在代码旁边加上足够的自然语言描述，确保每段代码dou有上下文说明，这样搜索引擎才Neng抓到关键词和语义。

先把 interval 调小点，比如写成2000毫秒，让每两秒切一次。然后再把 duration 调成6000毫秒，让每条卡片慢慢划过去。

Ru果你觉得速度太慢，就把 duration 降到4000，再配合 curve Linear 保持匀速感。

还有一个坑：Ru果同时开了 autoPlay 和手动滑动，会出现冲突——手指滑动时动画会被强制中断，然后立刻又回到自动播放状态。于是我们在 onTouch 的 Move 阶段什么dou别干，只在 Down 和 Up/Cancel Zuo事儿，就不会出现闪烁了。

先准备数据——两列字符串数组；

再在父组件里实例化 MarqueeCard 并传参；

P卡片内部用两个 Swiper 分别渲染上下排；

Swi­per 配置 autoPlay+loop+interval+duration+curve；

TouchEvent 控制 pause/resume；

Zui后给每个 item 加上点击事件，把业务逻辑交给父组件去处理。

Ru果还有哪里卡住了赶紧留言哈，我这儿随时帮忙掰掰~你懂的！