yanlu

fix:bug_001-人民号的类型布局设计鸿蒙与安卓不一致

@@ -8,9 +8,7 @@ import { RefreshLayoutBean } from '../page/RefreshLayoutBean' @@ -8,9 +8,7 @@ import { RefreshLayoutBean } from '../page/RefreshLayoutBean'
8 8
9 @Component 9 @Component
10 export struct PeopleShipHomeListComponent { 10 export struct PeopleShipHomeListComponent {
11 -  
12 private controller: TabsController = new TabsController() 11 private controller: TabsController = new TabsController()
13 -  
14 @State tabArr: ArticleTypeData[] = [] 12 @State tabArr: ArticleTypeData[] = []
15 @State creatorId: string = '' 13 @State creatorId: string = ''
16 // 发布数量 14 // 发布数量
@@ -19,17 +17,39 @@ export struct PeopleShipHomeListComponent { @@ -19,17 +17,39 @@ export struct PeopleShipHomeListComponent {
19 @State private isLoading: boolean = false 17 @State private isLoading: boolean = false
20 @Consume topHeight: number 18 @Consume topHeight: number
21 19
22 -  
23 build() { 20 build() {
24 if (this.isLoading) { 21 if (this.isLoading) {
25 this.LoadingLayout() 22 this.LoadingLayout()
26 } 23 }
27 // 列表 24 // 列表
28 - else if(this.publishCount == 0) { 25 + else if (this.publishCount == 0) {
29 // 无数据展示 26 // 无数据展示
30 EmptyComponent().height(DisplayUtils.getDeviceHeight() - this.topHeight) 27 EmptyComponent().height(DisplayUtils.getDeviceHeight() - this.topHeight)
31 } else { 28 } else {
32 - Tabs({ barPosition: BarPosition.Start, controller: this.controller}) { 29 + Column() {
  30 + Column() {
  31 + // 页签
  32 + Row() {
  33 + Scroll() {
  34 + Row() {
  35 + ForEach(this.tabArr, (item: ArticleTypeData, index: number) => {
  36 + this.Tab(index, item.name ?? '')
  37 + })
  38 + }
  39 + .justifyContent(FlexAlign.Start)
  40 + }
  41 + .align(Alignment.Start)
  42 + .scrollable(ScrollDirection.Horizontal)
  43 + .scrollBar(BarState.Off)
  44 + .width('100%')
  45 + }
  46 + .alignItems(VerticalAlign.Bottom)
  47 + .width('100%')
  48 + }
  49 + .alignItems(HorizontalAlign.Start)
  50 + .width('100%')
  51 +
  52 + Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
33 ForEach(this.tabArr, (item: ArticleTypeData, index: number) => { 53 ForEach(this.tabArr, (item: ArticleTypeData, index: number) => {
34 TabContent() { 54 TabContent() {
35 PeopleShipHomeArticleListComponent({ 55 PeopleShipHomeArticleListComponent({
@@ -38,16 +58,16 @@ export struct PeopleShipHomeListComponent { @@ -38,16 +58,16 @@ export struct PeopleShipHomeListComponent {
38 currentTopSelectedIndex: this.currentIndex, 58 currentTopSelectedIndex: this.currentIndex,
39 currentIndex: index 59 currentIndex: index
40 }) 60 })
41 - }.tabBar(this.tabBuilder(index, item.name ?? ''))  
42 - 61 + }
  62 + // }.tabBar(this.tabBuilder(index, item.name ?? ''))
43 }) 63 })
44 64
45 } 65 }
46 .backgroundColor(Color.White) 66 .backgroundColor(Color.White)
47 .barWidth('100%') 67 .barWidth('100%')
48 - .barHeight('44vp') 68 + .barHeight(0)
49 .vertical(false) 69 .vertical(false)
50 - .height(DisplayUtils.getDeviceHeight() - 100) 70 + .height(DisplayUtils.getDeviceHeight() - 144)
51 .animationDuration(0) 71 .animationDuration(0)
52 .divider({ 72 .divider({
53 strokeWidth: '0.5vp', 73 strokeWidth: '0.5vp',
@@ -59,7 +79,7 @@ export struct PeopleShipHomeListComponent { @@ -59,7 +79,7 @@ export struct PeopleShipHomeListComponent {
59 this.currentIndex = index 79 this.currentIndex = index
60 }) 80 })
61 } 81 }
62 - 82 + }
63 } 83 }
64 84
65 @Builder 85 @Builder
@@ -70,21 +90,33 @@ export struct PeopleShipHomeListComponent { @@ -70,21 +90,33 @@ export struct PeopleShipHomeListComponent {
70 }).height(DisplayUtils.getDeviceHeight() - this.topHeight) 90 }).height(DisplayUtils.getDeviceHeight() - this.topHeight)
71 } 91 }
72 92
73 - @Builder tabBuilder(index: number, name: string) { 93 + // 单独的页签
  94 + @Builder
  95 + Tab(index: number, name: string) {
74 Column() { 96 Column() {
75 Text(name) 97 Text(name)
76 - .fontColor(this.currentIndex === index ? $r('app.color.color_222222') : $r('app.color.color_666666') ) 98 + .fontColor(this.currentIndex === index ? $r('app.color.color_222222') : $r('app.color.color_666666'))
77 .fontSize(18) 99 .fontSize(18)
78 .fontWeight(this.currentIndex === index ? 500 : 400) 100 .fontWeight(this.currentIndex === index ? 500 : 400)
79 .lineHeight(22) 101 .lineHeight(22)
80 .height(22) 102 .height(22)
81 - .margin({ top: 11, bottom: 1 })  
82 Divider() 103 Divider()
83 .width('15vp') 104 .width('15vp')
84 .strokeWidth(2) 105 .strokeWidth(2)
85 .color('#CB0000') 106 .color('#CB0000')
86 .opacity(this.currentIndex === index ? 1 : 0) 107 .opacity(this.currentIndex === index ? 1 : 0)
87 - }.width('100%') 108 + }
  109 + .justifyContent(FlexAlign.Center)
  110 + .constraintSize({ minWidth: 35 })
  111 + .margin({
  112 + left: '16vp',
  113 + right: '16vp'
  114 + })
  115 + .height('44vp')
  116 + .onClick(() => {
  117 + this.controller.changeIndex(index)
  118 + this.currentIndex = index
  119 + })
88 } 120 }
89 121
90 async aboutToAppear() { 122 async aboutToAppear() {