HarmonyOS开发之Tab样式（背景高亮样式）

一：开发环境

二：效果图

三：实现步骤

@Entry
@Component
struct TabsPage {@State tabArray:string[] = ["首页","分类","应用","热点","我的"]@State focusIndex: number = 0;@State index: number = 0;private controller: TabsController = new TabsController();private listScroller: Scroller = new Scroller();private barHeight: number = 0;@BuildertabBuilder(tabName: string, tabIndex: number) {Row() {Text(tabName).fontSize(14).fontColor(tabIndex === this.focusIndex ? "#638EEF": "#E6000000").id(tabIndex.toString())}.justifyContent(FlexAlign.Center).width(60).backgroundColor(tabIndex === this.focusIndex ? "#243b75ef" : "").borderRadius(5).height(30).margin({ left: 8}).onClick(() => {this.controller.changeIndex(tabIndex)//  this.listScroller.scrollToIndex(tabIndex, true, ScrollAlign.CENTER);this.listScroller.scrollToIndex(tabIndex)})}build() {Column() {Stack().height(30)Row() {List({ scroller: this.listScroller }) {ForEach(this.tabArray,(item: string, index: number)=>{this.tabBuilder(item, index)},(item: string, index: number) => JSON.stringify(item) + index)}.width('100%').height('100%').listDirection(Axis.Horizontal).scrollBar(BarState.Off)}.width('95%').alignItems(VerticalAlign.Center).height(50).margin({ top: 8 })Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {ForEach(this.tabArray,(item: string) => {TabContent() {Row() {Text(item).height(300).fontSize(30)}.width('100%').justifyContent(FlexAlign.Center)}.backgroundColor(Color.White)}, (item: string, index: number) => JSON.stringify(item) + index)}.width("100%").barHeight(this.barHeight).animationDuration(300).onChange((targetIndex: number)=>{this.focusIndex = targetIndexthis.listScroller.scrollToIndex(targetIndex)})// .onAnimationStart((index: number, targetIndex: number) => {//api 9以长//   console.log( 'index', index.toString());//   this.focusIndex = targetIndex;//   this.listScroller.scrollToIndex(targetIndex, true, ScrollAlign.CENTER);// })}}
}