yuzhilin

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

@@ -64,8 +64,6 @@ export struct TopNavigationComponent { @@ -64,8 +64,6 @@ export struct TopNavigationComponent {
64 @State indicatorLeftMargin: number = 0 64 @State indicatorLeftMargin: number = 0
65 @State indicatorWidth: number = 0 65 @State indicatorWidth: number = 0
66 private tabsWidth: number = 0 66 private tabsWidth: number = 0
67 - //定时器延时处理切换至版面、播报tab时 返回上一个tab  
68 - @State tabTimmer: number = 0  
69 // 标识,是否为点击触发的tab切换,临时变量 67 // 标识,是否为点击触发的tab切换,临时变量
70 private changeByClick: boolean = false 68 private changeByClick: boolean = false
71 69
@@ -273,11 +271,7 @@ export struct TopNavigationComponent { @@ -273,11 +271,7 @@ export struct TopNavigationComponent {
273 let width = Number.parseFloat(newValue.width.toString()) 271 let width = Number.parseFloat(newValue.width.toString())
274 this.tabsWidth = Number.isNaN(width) ? 0 : width 272 this.tabsWidth = Number.isNaN(width) ? 0 : width
275 }) 273 })
276 - .animationDuration(this.animationDuration)  
277 .onChange((index: number) => { 274 .onChange((index: number) => {
278 - if (this.tabTimmer) {  
279 - clearTimeout(this.tabTimmer)  
280 - }  
281 this.currentTopNavName = 275 this.currentTopNavName =
282 this._currentNavIndex === 0 ? this.myChannelList[index].name : this.topNavList[index].name 276 this._currentNavIndex === 0 ? this.myChannelList[index].name : this.topNavList[index].name
283 Logger.info(TAG, `onChange index : ${index}`); 277 Logger.info(TAG, `onChange index : ${index}`);
@@ -289,13 +283,10 @@ export struct TopNavigationComponent { @@ -289,13 +283,10 @@ export struct TopNavigationComponent {
289 if (this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])) { 283 if (this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])) {
290 // 跳转到播报页面 284 // 跳转到播报页面
291 ProcessUtils.gotoBroadcastPage(this.myChannelList[index].pageId) 285 ProcessUtils.gotoBroadcastPage(this.myChannelList[index].pageId)
292 - this.tabTimmer = setTimeout(() => {  
293 this.tabsController.changeIndex(this.currentTopNavSelectedIndex) 286 this.tabsController.changeIndex(this.currentTopNavSelectedIndex)
294 - }, 100)  
295 } 287 }
296 if (this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])) { 288 if (this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])) {
297 ProcessUtils.gotoENewsPaper() 289 ProcessUtils.gotoENewsPaper()
298 - this.tabTimmer = setTimeout(() => {  
299 if (!this.changeByClick) { 290 if (!this.changeByClick) {
300 // 识别左滑右滑,跳过版面,到下一个 291 // 识别左滑右滑,跳过版面,到下一个
301 let nextIndex = this.currentTopNavSelectedIndex > index ? index - 1 : index + 1 292 let nextIndex = this.currentTopNavSelectedIndex > index ? index - 1 : index + 1
@@ -305,42 +296,41 @@ export struct TopNavigationComponent { @@ -305,42 +296,41 @@ export struct TopNavigationComponent {
305 // 重置标识 296 // 重置标识
306 this.changeByClick = false 297 this.changeByClick = false
307 } 298 }
308 - }, 100)  
309 - }  
310 - })  
311 - .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {  
312 - if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&  
313 - !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])  
314 - ) {  
315 - return  
316 - }  
317 - this.currentTopNavSelectedIndex = targetIndex  
318 - // 切换动画开始时触发该回调。下划线跟着页面一起滑动,同时宽度渐变。  
319 - let targetIndexInfo = this.getTextInfo(targetIndex)  
320 - this.startAnimateTo(this.animationDuration, targetIndexInfo.left, targetIndexInfo.width)  
321 - })  
322 - .onAnimationEnd((index: number, event: TabsAnimationEvent) => {  
323 - if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&  
324 - !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])  
325 - ) {  
326 - return  
327 - }  
328 - // 切换动画结束时触发该回调。下划线动画停止。  
329 - let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event)  
330 - this.startAnimateTo(0, currentIndicatorInfo.left, currentIndicatorInfo.width)  
331 - })  
332 - .onGestureSwipe((index: number, event: TabsAnimationEvent) => {  
333 - if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&  
334 - !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])  
335 - ) {  
336 - return  
337 } 299 }
338 - // 在页面跟手滑动过程中,逐帧触发该回调。  
339 - let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event)  
340 - this.currentTopNavSelectedIndex = currentIndicatorInfo.index  
341 - this.indicatorLeftMargin = currentIndicatorInfo.left  
342 - this.indicatorWidth = currentIndicatorInfo.width  
343 }) 300 })
  301 + // .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
  302 + // if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&
  303 + // !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])
  304 + // ) {
  305 + // return
  306 + // }
  307 + // this.currentTopNavSelectedIndex = targetIndex
  308 + // // 切换动画开始时触发该回调。下划线跟着页面一起滑动,同时宽度渐变。
  309 + // let targetIndexInfo = this.getTextInfo(targetIndex)
  310 + // this.startAnimateTo(this.animationDuration, targetIndexInfo.left, targetIndexInfo.width)
  311 + // })
  312 + // .onAnimationEnd((index: number, event: TabsAnimationEvent) => {
  313 + // if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&
  314 + // !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])
  315 + // ) {
  316 + // return
  317 + // }
  318 + // // 切换动画结束时触发该回调。下划线动画停止。
  319 + // let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event)
  320 + // this.startAnimateTo(0, currentIndicatorInfo.left, currentIndicatorInfo.width)
  321 + // })
  322 + // .onGestureSwipe((index: number, event: TabsAnimationEvent) => {
  323 + // if (!this.isBroadcast(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index]) &&
  324 + // !this.isLayout(this._currentNavIndex === 0 ? this.myChannelList[index] : this.topNavList[index])
  325 + // ) {
  326 + // return
  327 + // }
  328 + // // 在页面跟手滑动过程中,逐帧触发该回调。
  329 + // let currentIndicatorInfo = this.getCurrentIndicatorInfo(index, event)
  330 + // this.currentTopNavSelectedIndex = currentIndicatorInfo.index
  331 + // this.indicatorLeftMargin = currentIndicatorInfo.left
  332 + // this.indicatorWidth = currentIndicatorInfo.width
  333 + // })
344 334
345 // 分类列表最右侧频道设置 335 // 分类列表最右侧频道设置
346 if (this._currentNavIndex === 0) { 336 if (this._currentNavIndex === 0) {