纯血鸿蒙APP实战开发——自定义视图实现Tab效果
原创
介绍
本示例介绍使用Text、List等组件，添加点击事件onclick,动画，animationTo实现自定义Tab效果。
效果预览图
使用说明
- 点击页签进行切换，选中态页签字体放大加粗，颜色由灰变黑，起到强调作用，同时，底部颜色条横线位移到当前选中页签下方，内容区翻页到当前选中页签对应区域。
实现思路
- 页签实现：添加onClick方法，记录点击的index，index变化后，改变页签颜色、字体大小，使用animateTo方法实现页签切换动画。
Text(title)
.textAlign(TextAlign.Center)
.height($r('app.integer.custom_view_width_and_height_value4'))
.width(this.titleLengthRadix3 * title.length)
.fontColor(this.currentIndex == idx ?
(this.wantGoIndex == idx ? $r('app.color.custom_view_background_color1'):$r('app.color.custom_view_background_color2')):
(this.wantGoIndex == idx ? $r('app.color.custom_view_background_color1'):$r('app.color.custom_view_background_color2')))
.fontSize(this.currentIndex == idx ? $r('app.integer.custom_view_font_size2') : $r('app.integer.custom_view_font_size1'))
.fontWeight(this.currentIndex == idx ? FontWeight.Bold : FontWeight.Normal)
.onClick(() => {
if (this.currentIndex != idx) {
// 记录点击index
this.wantGoIndex = idx;
// 动画效果
animateTo({
duration: Math.abs(idx - this.currentIndex) * this.durationRadix,
curve: Curve.EaseInOut,
iterations: this.iterationsDefault,
playMode: PlayMode.Normal,
onFinish: () => {
this.currentIndex = idx;
this.scroller.scrollToIndex(this.currentIndex, true, ScrollAlign.START);
}
}, () => {
this.transitionX = this.getTransitionX(idx);
})
}
})- 内容区实现：使用List，添加滑动手势来进行页面的切换，手势响应后，使用scrollToIndex方法来实现平滑的滑动到相应index。
PanGesture(this.panOption)
.onActionUpdate((event:GestureEvent) => {
if (!this.isStartAction) {
this.isStartAction = true;
if (event.offsetX < this.judgmentValue) {
if (this.currentIndex < this.titleArray.length - this.currentIndexRadix) {
let temIndex: number = this.currentIndex + this.currentIndexRadix;
this.scroller.scrollToIndex(temIndex, true, ScrollAlign.START);
this.wantGoIndex = temIndex;
animateTo({
duration: Math.abs(temIndex - this.currentIndex) * this.durationRadix,
curve: Curve.EaseInOut,
iterations: this.iterationsDefault,
playMode: PlayMode.Normal,
onFinish: () => {
this.currentIndex = temIndex;
}
}, () => {
this.transitionX = this.getTransitionX(temIndex);
})
}
} else {
if (this.currentIndex > this.judgmentValue) {
let temIndex: number = this.currentIndex - this.currentIndexRadix;
this.scroller.scrollToIndex(temIndex, true, ScrollAlign.START);
this.wantGoIndex = temIndex;
animateTo({
duration: Math.abs(temIndex - this.currentIndex) * this.durationRadix,
curve: Curve.EaseInOut,
iterations: this.iterationsDefault,
playMode: PlayMode.Normal,
onFinish: () => {
this.currentIndex = temIndex;
}
}, () => {
this.transitionX = this.getTransitionX(temIndex);
})
}
}
}
})DD一下：鸿蒙开发各类文档，可关注公Z号<程序猿百晓生>霍取。
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案）
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......高性能知识点
scrollToIndex方法，开启smooth动效时，会对经过的所有item进行加载和布局计算，当大量加载item时会导致性能问题
工程结构&模块类型
customview // har类型
|---view
| |---CustomView.ets // 视图层-自定义视图实现Tab效果写在最后
如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
- 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力；
- 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识；
- 想要获取更多完整鸿蒙最新学习知识点，可关注B站：码牛课堂；
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
