Слияние кода завершено, страница обновится автоматически
本示例介绍使用Text、List等组件，添加点击事件onclick,动画，animationTo实现自定义Tab效果。
此案例有新升级，可以参考自定义动效tab
使用说明
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);
})
}
})
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);
})
}
}
}
})
scrollToIndex方法，开启smooth动效时，会对经过的所有item进行加载和布局计算，当大量加载item时会导致性能问题
customview // har类型
|---view
| |---CustomView.ets // 视图层-自定义视图实现Tab效果
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )