1 Star 0 Fork 232

kukixi / Cases

forked from HarmonyOS-Cases / Cases 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 1.72 KB
一键复制 编辑 原始数据 按行查看 历史

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

介绍

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

效果预览图

使用说明

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

实现思路

  1. 将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'))
}
  1. 通过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下方

模块依赖

utils @ohos/routermodule(动态路由)

参考资料

Swiper组件

JavaScript
1
https://gitee.com/kukixi/cases.git
git@gitee.com:kukixi/cases.git
kukixi
cases
Cases
master

搜索帮助