HarmonyOS ArkUi Tabs+TabContent+List实现tab吸顶功能

Join下班了吗

已于 2024-08-01 11:47:22 修改

阅读量1.6k

点赞数 9

CC 4.0 BY-SA版权

文章标签： harmonyos

于 2024-06-27 11:10:10 首次发布

本文链接：https://blog.youkuaiyun.com/qq_34501274/article/details/139962647

Demo效果



@Entry
@Component
struct StickyNestedScroll {
   
   
  @State message: string = 'Hello World'
  @State arr: number[] = []
  scroller = new Scroller()

  @Styles
  listCard() {
   
   
    .backgroundColor(Color.White)
    .height(72)
    .width("100%")
    .borderRadius(12)
  }

  build() {
   
   
    Scroll(this.scroller) {
   
   
      Column() {
   
   
        Stack({
    
     alignContent: Alignment.Top }) {
   
   
          Column() {
   
   

          }.height("200vp").width('100%').backgroundImage($r('app.media.icon_home_top'))
          // Text('吸顶').width('100%').height(40).backgroundColor(Color.Black).zIndex(999)
        }


        Tabs({
    
     barPosition: BarPosition.Start }) {
   
   
          TabContent() {
   
   
            List({
    
     space: 10 }) {
   
   
              ForEach(this.arr, (item: number) => {
   
   
                ListItem() {
   
   
                  Text("item" + item)
                    .fontSize(16)
                }.listCard()
              }, (item: string) => item)
            }.width("100%")
            .edgeEffect(EdgeEffect.Spring)
            .nestedScroll({
   
   
              scrollForward: NestedScrollMode.PARENT_FIRST,
              scrollBackward: NestedScrollMode.SELF_FIRST
            })
          }.tabBar("Tab1")

          TabContent() {
   
   
          }.tabBar("Tab2")
        }
        .vertical(