【入门到精通】鸿蒙next应用开发：Swiper指示器导航点位于Swiper下方实现案例

 往期鸿蒙5.0全套实战文章必看：（文中附带鸿蒙5.0全栈学习资料）

• 鸿蒙开发核心知识点，看这篇文章就够了

• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线

• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南

• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）

---

swiper指示器导航点位于swiper下方

介绍

本示例介绍通过分割swiper区域，实现指示器导航点位于swiper下方的效果。

效果预览图

使用说明

1. 加载完成后swiper指示器导航点，位于显示内容下方。

实现思路

1. 将swiper区域分割为两块区域，上方为内容区域，下方为空白区域。

Column() {
  Image(item)
    .width($r('app.string.one_hundred_percent'))
    .height($r('app.string.thirty_percent'))
    .borderRadius($r('app.integer.borderRadius_value'))

  Column()
    .width($r('app.string.one_hundred_percent'))
    .height($r('app.integer.blank_space_height'))
}

1. 通过indicator属性调整指示器导航点位置，使其位于空白区域。

Swiper(this.swiperController) {
  ...
}
.width($r('app.string.ninety_five_percent'))
.loop(true)
.autoPlay(true)
.indicator(new DotIndicator().bottom($r('app.integer.offset_value')))

高性能知识点

不涉及

工程结构&模块类型

indicatorbelowswiper                                        // har类型
|---view
|   |---IndicatorBelowSwiper.ets                            // 视图层-swiper指示器导航点位于swiper下方