介绍
本示例介绍通过分割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下方
写在最后
如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
- 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
- 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
- 想要获取更多完整鸿蒙最新学习知识点,请移步前往小编:
https://gitee.com/MNxiaona/733GH