介绍
本示例介绍通过分割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下方
模块依赖
utils
参考资料
Swiper组件
为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05
《鸿蒙开发学习手册》:
如何快速入门:https://qr21.cn/FV7h05
- 基本概念
- 构建第一个ArkTS应用
- ……
开发基础知识:https://qr21.cn/FV7h05
- 应用基础知识
- 配置文件
- 应用数据管理
- 应用安全管理
- 应用隐私保护
- 三方应用调用管控机制
- 资源分类与访问
- 学习ArkTS语言
- ……
基于ArkTS 开发:https://qr21.cn/FV7h05
- Ability开发
- UI开发
- 公共事件与通知
- 窗口管理
- 媒体
- 安全
- 网络与链接
- 电话服务
- 数据管理
- 后台任务(Background Task)管理
- 设备管理
- 设备使用信息统计
- DFX
- 国际化开发
- 折叠屏系列
- ……
鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH
鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH
1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向