Showing
1 changed file
with
46 additions
and
14 deletions
| @@ -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() { |
-
Please register or login to post a comment