鸿蒙开发：案例集合Tabs：tabs竖向粘性

汉堡黄2025-11-29 12:14

🎯 案例集合Tabs：tabs竖向粘性

🌍 案例集合Tabs

🚪 最近开启了学员班级点我欢迎加入

🏷️ 效果图

📖 参考

nestedScroll（嵌套滚动）
SubTabBarStyle

🧩 拆解

自定义tabs突出球左右滑动

javascript 复制代码

/**
 * tab模拟数据
 */
const tabsMockData: string[] = ['购物', '体育', '服装', '军事']
/**
 * TabContents模拟数据
 */
const tabContentsMockData: number[] = [1, 2, 3, 4, 5]

@Component
export struct TabsStickyCase {

  /**
   * 标签内容
   */
  @Builder
  tabContentsBuilder() {
    List({ space: 20 }) {
      ForEach(tabContentsMockData, (item: number) => {
        ListItem() {
          Text(item.toString())
            .height(200)
            .width('100%')
            .borderRadius(10)
            .textAlign(TextAlign.Center)
            .borderWidth(1)
            .borderColor(Color.Gray)
        }
      })
    }
    .width('100%')
    .height('100%')
    .padding(10)
    .scrollBar(BarState.Off) // 关闭滚动条
    .edgeEffect(EdgeEffect.None) // 关闭边缘效果
    // 关键：
    .nestedScroll({
      scrollForward: NestedScrollMode.PARENT_FIRST, // 滚动组件往末尾端滚动时：父组件先滚动
      scrollBackward: NestedScrollMode.SELF_FIRST // 滚动组件往起始端滚动时：自身先滚动，自身滚动到边缘以后父组件滚动。
    })
  }

  /**
   * 模拟Swipe组件或者banner组件
   */
  @Builder
  mockSwipeBuilder() {
    Stack({ alignContent: Alignment.Center }) {
      Image($r('app.media.startIcon'))
        .width('100%')
        .height(200)
        .draggable(false)
        .borderRadius(10)
      Text('模拟Swipe组件')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
    }
    .height(200)
    .width('100%')
  }

  build() {
    Column() {
      Scroll() {
        Column() {
          this.mockSwipeBuilder()

          // 标签导航
          Tabs() {
            ForEach(tabsMockData, (item: string) => {
              TabContent() {
                this.tabContentsBuilder()
              }
              .tabBar(SubTabBarStyle.of(item)
                .indicator({ width: 72, marginTop: 13, color: Color.Orange })
                .board({ borderRadius: 0 })
                .labelStyle({ selectedColor: Color.Orange, font: { size: 16 } })
              )
            })
          }
          .barHeight(50)

        }
      }
      .layoutWeight(1)
      .scrollBar(BarState.Off) // 关闭滚动条
      .edgeEffect(EdgeEffect.None) // 关闭边缘效果
    }
    .size({ height: '100%', width: '100%' })
  }
}

🌸🌼🌺