developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
yuzhilin
bbe03481 1 parent d56edc3e

fix：修复点击 tab 切换频道没有动画问题

Inline Side-by-side
Showing 1 changed file with 33 additions and 43 deletions
... ... @@ -64,8 +64,6 @@ export struct TopNavigationComponent {
@State indicatorLeftMargin: number = 0
@State indicatorWidth: number = 0
private tabsWidth: number = 0
//定时器延时处理切换至版面、播报tab时 返回上一个tab
@State tabTimmer: number = 0
// 标识，是否为点击触发的tab切换，临时变量
private changeByClick: boolean = false
... ... @@ -273,11 +271,7 @@ export struct TopNavigationComponent {
let width = Number.parseFloat(newValue.width.toString())
this.tabsWidth = Number.isNaN(width) ? 0 : width
})
.animationDuration(this.animationDuration)
.onChange((index: number) => {
if (this.tabTimmer) {
clearTimeout(this.tabTimmer)
}
this.currentTopNavName =
this._currentNavIndex === 0 ? this.myChannelList[index].name : this.topNavList[index].name
Logger.info(TAG, `onChange index : ${index}`);
... ... @@ -289,13 +283,10 @@ export struct TopNavigationComponent {
if (this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])) {
// 跳转到播报页面
ProcessUtils.gotoBroadcastPage(this.myChannelList[index].pageId)
this.tabTimmer = setTimeout(() => {
this.tabsController.changeIndex(this.currentTopNavSelectedIndex)
}, 100)
}
if (this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])) {
ProcessUtils.gotoENewsPaper()
this.tabTimmer = setTimeout(() => {
if (!this.changeByClick) {
// 识别左滑右滑，跳过版面，到下一个
let nextIndex = this.currentTopNavSelectedIndex > index ? index - 1 : index + 1
... ... @@ -305,42 +296,41 @@ export struct TopNavigationComponent {
// 重置标识
this.changeByClick = false
}
}, 100)
}
})
.onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&
!this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])
) {
return
}
this.currentTopNavSelectedIndex = targetIndex
// 切换动画开始时触发该回调。下划线跟着页面一起滑动，同时宽度渐变。
let targetIndexInfo = this.getTextInfo(targetIndex)
this.startAnimateTo(this.animationDuration, targetIndexInfo.left, targetIndexInfo.width)
})
.onAnimationEnd((index: number, event: TabsAnimationEvent) => {
if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&
!this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])
) {
return
}
// 切换动画结束时触发该回调。下划线动画停止。
let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event)
this.startAnimateTo(0, currentIndicatorInfo.left, currentIndicatorInfo.width)
})
.onGestureSwipe((index: number, event: TabsAnimationEvent) => {
if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&
!this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])
) {
return
}
// 在页面跟手滑动过程中，逐帧触发该回调。
let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event)
this.currentTopNavSelectedIndex = currentIndicatorInfo.index
this.indicatorLeftMargin = currentIndicatorInfo.left
this.indicatorWidth = currentIndicatorInfo.width
})
// .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
// if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&
// !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])
// ) {
// return
// }
// this.currentTopNavSelectedIndex = targetIndex
// // 切换动画开始时触发该回调。下划线跟着页面一起滑动，同时宽度渐变。
// let targetIndexInfo = this.getTextInfo(targetIndex)
// this.startAnimateTo(this.animationDuration, targetIndexInfo.left, targetIndexInfo.width)
// })
// .onAnimationEnd((index: number, event: TabsAnimationEvent) => {
// if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&
// !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])
// ) {
// return
// }
// // 切换动画结束时触发该回调。下划线动画停止。
// let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event)
// this.startAnimateTo(0, currentIndicatorInfo.left, currentIndicatorInfo.width)
// })
// .onGestureSwipe((index: number, event: TabsAnimationEvent) => {
// if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&
// !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])
// ) {
// return
// }
// // 在页面跟手滑动过程中，逐帧触发该回调。
// let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event)
// this.currentTopNavSelectedIndex = currentIndicatorInfo.index
// this.indicatorLeftMargin = currentIndicatorInfo.left
// this.indicatorWidth = currentIndicatorInfo.width
// })
// 分类列表最右侧频道设置
if (this._currentNavIndex === 0) {
... ...