@Entry @Component struct TabsList { @State fontColor: string = '#182431' @State selectedFontColor: string = '#007DFF' @State currentIndex: number = 0 @State initialIndex: number = 0 private arr: number[] = [] private scroller: ListScroller = new ListScroller() private controller: TabsController = new TabsController() aboutToAppear() { // 初始化数据源。 for (let i = 0; i < 4; i++) { this.arr.push(i) } } @Builder tabBuilder(index: number, name: string) { Column() { Text(name) .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) .fontSize(16) .fontWeight(this.currentIndex === index ? 500 : 400) .lineHeight(22) .margin({ top: 17, bottom: 7 }) Divider() .strokeWidth(2) .color('#007DFF') .opacity(this.currentIndex === index ? 1 : 0) }.width('100%') } build() { Row() { Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) { TabContent() { }.tabBar(this.tabBuilder(0, 'green')) TabContent() { }.tabBar(this.tabBuilder(1, 'blue')) TabContent() { }.tabBar(this.tabBuilder(2, 'yellow')) TabContent() { }.tabBar(this.tabBuilder(3, 'pink')) } .vertical(true) .barMode(BarMode.Fixed) .barWidth(100) .barHeight('100%') .animationDuration(400) .onTabBarClick((index: number) => { this.scroller.scrollToIndex(index, true) this.currentIndex = index // console.log(JSON.stringify(this.scroller.getItemRect(index))) }) .width(100) .height('100%') .backgroundColor('#F1F3F5') List({ space: 20, initialIndex: this.initialIndex, scroller: this.scroller }) { ForEach(this.arr, (item: number) => { ListItem() { Text('item-' + item) .height('80%') .width('90%') .fontSize(16) .textAlign(TextAlign.Center) .borderRadius(10) .backgroundColor(0xFFFFFF) }.margin({ bottom: 20 }) }, (item: string) => item) } .backgroundColor(Color.Gray) .layoutWeight(1) .scrollBar(BarState.Off) .alignListItem(ListItemAlign.Center) // 居中显示左右空隙 .onScrollIndex((start, end, center) => { this.initialIndex = center // 保存了一下正在滚动的index }) .onScrollFrameBegin((offset: number) => { // 因为点击tabs后会触发onScrollIndex造成tabs选择bug所以在这个事件中赋值 this.currentIndex = this.initialIndex // 滚动结束赋值给tabs return { offsetRemain: offset }; }) }.height('100%').width('100%') } }
鸿蒙中商品分类
最新推荐文章于 2024-10-01 14:53:57 发布