fix：

1）修改顶导UI布局

fix：
1）修改顶导UI布局
liyubing
Commit be846bcfcbe276997e46839482f4775dc4ca523b be846bcf 1 parent fd3e2551
Showing 1 changed file with 35 additions and 34 deletions
sight_harmony/features/wdComponent/src/main/ets/components/page/TopNavigationComponentNew.ets
--- a/sight_harmony/features/wdComponent/src/main/ets/components/page/TopNavigationComponentNew.ets
View file @be846bc
+++ b/sight_harmony/features/wdComponent/src/main/ets/components/page/TopNavigationComponentNew.ets
View file @be846bc
@@ -113,7 +113,7 @@ export struct TopNavigationComponentNew {
           'middle': { 'anchor': '__container__', 'align': HorizontalAlign.Center },
           'bottom': { 'anchor': '__container__', 'align': VerticalAlign.Bottom }
         })
-        .onAnimationStart((curIndex: number, index: number)=>{
+        .onAnimationStart((curIndex: number, index: number) => {
           Logger.info(TAG, `onAnimationStart ${curIndex} ${index}`);
           if (curIndex === index) {
             return
@@ -233,7 +233,7 @@ export struct TopNavigationComponentNew {
       .listDirection(Axis.Horizontal)
       .scrollBar(BarState.Off)
       .edgeEffect(EdgeEffect.None)
-      .padding({ left: 8, top: 6, right: 0 })
+      .padding({ left: 8, top:0, right: 0 })
       .height($r('app.float.top_tab_bar_height'))
       .backgroundColor(this.barBackgroundColor)
       .onAreaChange((oldValue: Area, newValue: Area) => {
@@ -278,13 +278,12 @@ export struct TopNavigationComponentNew {
       .listDirection(Axis.Horizontal)
       .scrollBar(BarState.Off)
       .edgeEffect(EdgeEffect.None)
-      .height($r('app.float.top_tab_bar_height_common'))
-      .backgroundColor(this.barBackgroundColor)
-      .margin({ top: 10 })
       .onAreaChange((oldValue: Area, newValue: Area) => {
         let width = Number.parseFloat(newValue.width.toString())
         this.tabsWidth = Number.isNaN(width) ? 0 : width
       })
+      .height($r('app.float.top_tab_bar_height_common'))
+      .backgroundColor(this.barBackgroundColor)
       .id('tabList')
       .alignRules({
         'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
@@ -327,12 +326,13 @@ export struct TopNavigationComponentNew {
       minWidth: $r('app.float.top_tab_item_min_width'),
       maxWidth: $r('app.float.top_tab_item_max_width')
     })
+    .height('100%')
     // .backgroundColor(Color.Transparent)
     .padding({
       left: $r('app.float.top_tab_item_padding_horizontal'),
       right: $r('app.float.top_tab_item_padding_horizontal'),
-      bottom: 2,
     })
+    .justifyContent(FlexAlign.Center)
     .id(`col_tabBar${index}`)
     // .margin({ right: this.myChannelList.length === index + 1 ? 36 : 0 })
     .onClick(() => {
@@ -497,7 +497,7 @@ export struct TopNavigationComponentNew {
     Logger.info(TAG, `currentTopNavSelectedIndex : ${this.currentTopNavSelectedIndex}、${this.currentBottomNavName}`);
     // 顶部tab埋点
-    if(this.currentBottomNavName === '新闻') {
+    if (this.currentBottomNavName === '新闻') {
       const tab = this.myChannelList[this.currentTopNavSelectedIndex]
       Logger.info(TAG, `新闻tab埋点: ${JSON.stringify(tab)}`);
@@ -507,7 +507,7 @@ export struct TopNavigationComponentNew {
         "pageId": tab.pageId,
       }
       Tracking.event("home_page_tab_click ", params)
-    } else if(this.currentBottomNavName === '人民号') {
+    } else if (this.currentBottomNavName === '人民号') {
       const tab = this.topNavList[this.currentTopNavSelectedIndex]
       Logger.info(TAG, `人民号tab埋点: ${JSON.stringify(tab)}`);
@@ -519,6 +519,7 @@ export struct TopNavigationComponentNew {
       Tracking.event("People_account_page_tab_click", params)
     }
   }
+
   onAutoRefresh() {
     if (this.bottomNavIndex != this._currentNavIndex) {
       return
@@ -619,32 +620,32 @@ export struct TopNavigationComponentNew {
     return null
   }
-  private getTextInfo(index: number): Record<string, number> {
-    let strJson = getInspectorByKey(index.toString())
-    try {
-      let obj: Record<string, string> = JSON.parse(strJson)
-      let rectInfo: number[][] = JSON.parse('[' + obj.$rect + ']')
-      return { 'left': px2vp(rectInfo[0][0]), 'width': px2vp(rectInfo[1][0] - rectInfo[0][0]) }
-    } catch (error) {
-      return { 'left': 0, 'width': 0 }
-    }
-  }
-
-  private getCurrentIndicatorInfo(index: number, event: TabsAnimationEvent): Record<string, number> {
-    let nextIndex = index
-    if (index > 0 && event.currentOffset > 0) {
-      nextIndex--
-    } else if (index < 3 && event.currentOffset < 0) {
-      nextIndex++
-    }
-    let indexInfo = this.getTextInfo(index)
-    let nextIndexInfo = this.getTextInfo(nextIndex)
-    let swipeRatio = Math.abs(event.currentOffset / this.tabsWidth)
-    let currentIndex = swipeRatio > 0.5 ? nextIndex : index // 页面滑动超过一半，tabBar切换到下一页。
-    let currentLeft = indexInfo.left + (nextIndexInfo.left - indexInfo.left) * swipeRatio
-    let currentWidth = indexInfo.width + (nextIndexInfo.width - indexInfo.width) * swipeRatio
-    return { 'index': currentIndex, 'left': currentLeft, 'width': currentWidth }
-  }
+  // private getTextInfo(index: number): Record<string, number> {
+  //   let strJson = getInspectorByKey(index.toString())
+  //   try {
+  //     let obj: Record<string, string> = JSON.parse(strJson)
+  //     let rectInfo: number[][] = JSON.parse('[' + obj.$rect + ']')
+  //     return { 'left': px2vp(rectInfo[0][0]), 'width': px2vp(rectInfo[1][0] - rectInfo[0][0]) }
+  //   } catch (error) {
+  //     return { 'left': 0, 'width': 0 }
+  //   }
+  // }
+
+  // private getCurrentIndicatorInfo(index: number, event: TabsAnimationEvent): Record<string, number> {
+  //   let nextIndex = index
+  //   if (index > 0 && event.currentOffset > 0) {
+  //     nextIndex--
+  //   } else if (index < 3 && event.currentOffset < 0) {
+  //     nextIndex++
+  //   }
+  //   let indexInfo = this.getTextInfo(index)
+  //   let nextIndexInfo = this.getTextInfo(nextIndex)
+  //   let swipeRatio = Math.abs(event.currentOffset / this.tabsWidth)
+  //   let currentIndex = swipeRatio > 0.5 ? nextIndex : index // 页面滑动超过一半，tabBar切换到下一页。
+  //   let currentLeft = indexInfo.left + (nextIndexInfo.left - indexInfo.left) * swipeRatio
+  //   let currentWidth = indexInfo.width + (nextIndexInfo.width - indexInfo.width) * swipeRatio
+  //   return { 'index': currentIndex, 'left': currentLeft, 'width': currentWidth }
+  // }
   private startAnimateTo(duration: number, leftMargin: number, width: number) {
     animateTo({