当前位置:   article > 正文

TabContent_鸿蒙tabs的tabcontent内容如何动态设置

鸿蒙tabs的tabcontent内容如何动态设置
  1. @Entry
  2. @Component
  3. struct Index {
  4. @State message: string = 'Hello World'
  5. @State fontColor: string = '#182431'
  6. @State selectedFontColor: string = '#007DFF'
  7. @State currentIndex: number = 0
  8. private controller: TabsController = new TabsController()
  9. build() {
  10. Tabs({ barPosition: BarPosition.Start, controller:this.controller }) {
  11. TabContent() {
  12. Column().width('100%').height('100%').backgroundColor('#00CB87')
  13. }.tabBar(this.TabBuilder(0, 'green'))
  14. TabContent() {
  15. Column().width('100%').height('100%').backgroundColor('#007DFF')
  16. }.tabBar(this.TabBuilder(1, 'blue'))
  17. TabContent() {
  18. Column().width('100%').height('100%').backgroundColor('#FFBF00')
  19. }.tabBar(this.TabBuilder(2, 'yellow'))
  20. TabContent() {
  21. Column().width('100%').height('100%').backgroundColor('#E67C92')
  22. }.tabBar(this.TabBuilder(3, 'pink'))
  23. }
  24. .vertical(false) //Tabs 方向 false:横向 true:纵向
  25. .barMode(BarMode.Fixed) //布局模式 Fixed:平均分配页签栏宽度或长度
  26. .barWidth(360) //设置页签栏宽度
  27. .barHeight(56) //设置页签栏高度
  28. .animationDuration(400) //设置切换页签的滑动动画时长
  29. .onChange((index: number) => {
  30. this.currentIndex = index
  31. })
  32. .width(360)
  33. .height(296)
  34. .margin({ top: 52 })
  35. .backgroundColor('#F1F3F5')
  36. }
  37. @Builder TabBuilder(index: number, name: string) {
  38. Column() {
  39. Text(name)
  40. .fontColor(this.currentIndex === index ?
  41. this.selectedFontColor : this.fontColor)
  42. .fontSize(16)
  43. .fontWeight(this.currentIndex === index ? 500 : 400)
  44. .lineHeight(22)
  45. .margin({ top: 17, bottom: 7 })
  46. Divider()
  47. .strokeWidth(2)
  48. .color('#6666ff')
  49. .opacity(this.currentIndex === index ? 1 : 0)
  50. }.width('100%')
  51. }
  52. }

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号