HarmonyOS NEXT应用开发之swiper指示器导航点位于swiper下方

AIGC小哈

已于 2024-05-15 21:46:14 修改

阅读量1k

点赞数 45

文章标签： harmonyos 华为

于 2024-05-07 07:15:00 首次发布

本文链接：https://blog.csdn.net/2401_83047642/article/details/138483079

版权

介绍

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

效果预览图

使用说明

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

实现思路

将swiper区域分割为两块区域，上方为内容区域，下方为空白区域。源码参考IndicatorBelowSwiper.ets。

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属性调整指示器导航点位置，使其位于空白区域。源码参考IndicatorBelowSwiper.ets。

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