TabComponent.ets
1.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import { TabChatComponent } from './TabChatComponent'
import { TabInfoComponent } from './TabInfoComponent'
import { TabLiveComponent } from './TabLiveComponent'
@Component
export struct TabComponent {
@State fontColor: string = '#999999'
@State selectedFontColor: string = '#222222'
@State currentIndex: number = 0
private controller: TabsController = new TabsController()
tabs: string[] = ['简介', '直播间', '大家聊']
aboutToAppear(): void {
}
build() {
Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
ForEach(this.tabs, (item: string, index: number) => {
TabContent() {
if (0 == index) {
TabInfoComponent()
} else if (1 == index) {
TabLiveComponent()
} else {
TabChatComponent()
}
}.tabBar(this.tabBuilder(index, item))
.backgroundColor('#F5F5F5')
}, (item: string, index: number) => {
return item + index
})
}
.layoutWeight(1)
.vertical(false)
.barMode(BarMode.Fixed)
.barWidth(200)
.barHeight(48)
.animationDuration(100)
.onChange((index: number) => {
this.currentIndex = index
})
.backgroundColor(Color.White)
}
@Builder
tabBuilder(index: number, name: string) {
Column() {
Text(name)
.margin({ top: 6 })
.fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
.fontSize('18fp')
.fontWeight(this.currentIndex === index ? 600 : 400)
Divider()
.strokeWidth(2)
.margin({ top: 6 })
.width(15)
.color('#CB0000')
.visibility(this.currentIndex === index ? Visibility.Visible : Visibility.Hidden)
}.width('100%')
}
aboutToDisappear(): void {
}
}