鸿蒙(HarmonyOS)应用开发实战——swiper指示器导航点位于swiper下方

CTrup

于 2024-09-28 19:57:17 发布

阅读量288

点赞数 2

分类专栏： HarmonyOS 移动开发鸿蒙开发文章标签： harmonyos 鸿蒙开发移动开发 ArkUI 界面布局组件化

本文链接：https://blog.csdn.net/CTrup/article/details/142620695

版权

移动开发同时被 3 个专栏收录

218 篇文章 1 订阅

订阅专栏

鸿蒙开发

218 篇文章 0 订阅

订阅专栏

HarmonyOS

180 篇文章 0 订阅

订阅专栏

往期知识点整理

介绍

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

效果预览图

使用说明

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

实现思路

将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'))
}

通过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下方