Tab动效切换鸿蒙示例代码

.onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
  // 切换动画开始时触发该回调。下划线跟着页面一起滑动，同时宽度渐变。
  this.currentIndex = targetIndex
  let targetIndexInfo = this.getTextInfo(targetIndex)
  this.startAnimateTo(this.animationDuration, targetIndexInfo.left, targetIndexInfo.width)
})
.onAnimationEnd((index: number,event: TabsAnimationEvent) => {
  // 切换动画结束时触发该回调。下划线动画停止。
  let currentIndicatorInfo = this.getCurrentIndicatorInfo(index,event)
  this.startAnimateTo(0,currentIndicatorInfo.left,currentIndicatorInfo.width)
})
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

.onGestureSwipe((index: number,event: TabsAnimationEvent) => {
  let currentIndicatorInfo = this.getCurrentIndicatorInfo(index,event)
  this.currentIndex = currentIndicatorInfo.index
  this.indicatorLeftMargin = currentIndicatorInfo.left
  this.indicatorWidth = currentIndicatorInfo.width
})
1.
2.
3.
4.
5.
6.