HarmonyOS7 Swiper 轮播：banner 自动播放案例

前言

打开任何电商、资讯 app，顶部那个"左右滑动的广告 banner"就是Swiper轮播。它自动播放、手指能滑、底下还有小圆点指示当前页。

这篇文章我把 Swiper 的常用配置讲透：怎么自动播放、怎么加指示器、怎么监听当前页。一套 banner 代码直接抄走。

最基础的 Swiper

@Localbanners:string[]=['a','b','c']// 图片资源或地址build(){Swiper(){ForEach(this.banners,(item)=>{Image($r('app.media.'+item)).width('100%').height(160).objectFit(ImageFit.Cover)},(item)=>item)}.width('100%').height(160).indicator(true)// 显示小圆点指示器.loop(true)// 循环播放}

要点：

• Swiper()里放子组件，每个子项是一页。
• .indicator(true)：底部显示小圆点，告诉用户有几页、当前第几页。
• .loop(true)：播到最后一张自动回到第一张，循环不停。

自动播放

加上两条配置就能自动轮播：

代码实现

Swiper(){// ...}.autoPlay(true)// 自动播放.interval(3000)// 每 3 秒切一张.duration(500)// 切换动画 500ms

• autoPlay(true)：开自动播放。
• interval(3000)：间隔 3 秒，单位毫秒。
• duration(500)：单张切换的动画时长，影响顺滑度。

监听当前页 & 自定义指示器

想知道现在在第几页，用onChange；想做更漂亮的指示器，关掉默认、自己画：

核心代码

@Localcurrent:number=0Swiper(){// ...}.indicator(false)// 关掉默认指示器.onChange((idx:number)=>{this.current=idx// 记录当前页，用来高亮自定义圆点})

配合底部一排自定义圆点，用current决定哪个高亮：

完整示例

Row(){ForEach(this.banners,(_,i)=>{Circle({width:8,height:8}).fill(i===this.current?'#FF4500':'#CCCCCC').margin(4)})}.justifyContent(FlexAlign.Center)

竖向轮播 & 一屏多页

Swiper 还能竖着滑、或一屏显示多个：

代码解析

Swiper(){// ...}.vertical(true)// 竖向轮播.displayCount(2)// 一屏显示 2 页（适合卡片墙）

• vertical(true)：上下滑动切换。
• displayCount(2)：一次露两页，适合做"推荐卡片"横滑列表。

常见误区（小白必踩）

下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲，改一改文末「动手改一改」里的参数，亲眼看看效果。

完整可运行示例：Swiper 自动轮播

banner 自动播放 + 指示点。

实现拆解

// Swiper 自动轮播@Entry@Componentstruct Banner{privatetitles:string[]=['活动一','活动二','活动三']build(){Swiper(){ForEach(this.titles,(t:string)=>{Text(t).width('100%').height(160).textAlign(TextAlign.Center).backgroundColor('#007DFF').fontColor('#FFF').fontSize(22)})}.autoPlay(true)// 自动播放.interval(3000)// 3 秒一切.indicator(true)// 显示指示点.loop(true)// 循环.width('100%')}}

你会看到什么：蓝底 banner 每 3 秒自动切换一屏，底部有小圆点指示当前页，滑到最后会循环回第一屏。

动手改一改：

• 把interval(3000)改成1000，看切换变快。
• 把indicator(true)改成indicator(false)，隐藏圆点。
• 把Text换成Image，做成真实图片轮播。

写在最后

Swiper 是 banner 的标配，记住四个配置就够用：indicator（指示器）、loop（循环）、autoPlay+interval（自动播）、onChange（监听页）。需要更花哨的指示器就关掉默认的自己画。

把你 app 的首页顶部换成 Swiper banner，加上自动播放和圆点——这一下子就有"大厂 app"的观感了。记住 interval 别太短，3 秒是比较舒服的节奏。