HarmonyOS list sticky相关问题

List.sticky(StickyStyle.Header) 使用ListItemGroup header的功能时,我的ListItemGroup内部的list 如果不滚动到header 的下方(与 header 重叠)。需求是内部的 list 滚动不应该超过 header。

如图所示,现在ListItemGroup内部的 list (HomeRoomListPage)向上滚动的时候,会与 header 重叠。

List() {
  ListItem() {
    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
      this.HomeTopFunctionView("每日福利", $r("app.media.icon_home_daily"))
      this.HomeTopFunctionView("甜蜜空间", $r("app.media.ic_home_sweet_meet"))
      this.HomeTopFunctionView("爱情小屋", $r("app.media.icon_home_marriage"))
      this.HomeTopFunctionView("我的派对", $r("app.media.icon_home_party"))
      this.HomeTopFunctionView("好友在玩", $r("app.media.icon_home_play"))
    }.margin({ top: 16, left: 8, right: 8 })
  }

  ListItemGroup({ header: this.Tab() }) {
    ListItem() {
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        ForEach(this.homeInfo.room.label, (item: RoomLabel, index: number) => {
          TabContent() {
            HomeRoomListPage({ roomList: this.homeInfo.room.list, labelType: item.labelType, current: index })
          }.margin({ top: 12 })
          .tabBar(item.labelName).width('100%').height('100%')
        })
      }
      .barMode(BarMode.Scrollable)
      .barHeight(0)
      .onChange((index: number) => {
        this.focusIndex = index
      })
      .width('100%')
      .height('100%')
      .layoutWeight(1)
    }
  }
}.layoutWeight(1).height('100%').width('100%').sticky(StickyStyle.Header)

HarmonyOS list sticky相关问题 -鸿蒙开发者社区

HarmonyOS
2024-12-25 12:36:24
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

示例参考如下:

// xxx.ets
@Entry
@Component
struct ListExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State totalScrollOffset: number = 0;
  private tabArray: number[] = [0, 1, 2]
  @State focusIndex: number = 0;
  private controller: TabsController = new TabsController()

  @Builder
  myScroll() {
    Scroll() {
      Row() {
        ForEach(this.tabArray, (item: number, index: number) => {
          Row({ space: 20 }) {
            Text('页签' + item)
              .fontWeight(index === this.focusIndex ? FontWeight.Bold : FontWeight.Normal)
          }
          .padding({ left: '10fp', right: '10fp' })
          .onClick(() => {
            this.controller.changeIndex(index)
            this.focusIndex = index
          })
        })
      }
    }
    .align(Alignment.Start)
    .scrollable(ScrollDirection.Horizontal)
    .scrollBar(BarState.Off)
    .width('100%')
    .height(50)
    .backgroundColor('#00000000')
  }

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        // ForEach(this.arr, (item: number) => {
        ListItem() {
          Text('')
            .width('100%')
            .height(100)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .borderRadius(10)
            .backgroundColor(Color.Red)
        }

        // }, (item: string) => item)
        ListItemGroup({ header: this.myScroll() }) {
          ListItem() {
            //tabs组件把tabbar隐藏
            Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
              ForEach(this.tabArray, (item: number, index: number) => {
                TabContent() {
                  List({ space: 20, initialIndex: 0 }) {
                    ForEach(this.arr, (item: number) => {
                      ListItem() {
                        Text('' + item)
                          .width('100%').height(100).fontSize(16)
                          .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(Color.Blue)
                      }
                    }, (item: string) => item)

                  }
                  .listDirection(Axis.Vertical) // 排列方向
                  .scrollBar(BarState.Off)
                  .friction(0.6)
                  .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
                  .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
                  .nestedScroll({//规避滚动冲突
                    scrollForward:NestedScrollMode.PARENT_FIRST,
                    scrollBackward:NestedScrollMode.SELF_FIRST
                  })
                }
              })
            }
            .barHeight(0)
          }
          .height('94%')
        }
      }
      .sticky(StickyStyle.Header)
      .listDirection(Axis.Vertical) // 排列方向
      .scrollBar(BarState.Off)
      .friction(0.6)
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
      .edgeEffect(EdgeEffect.None)
      .width('90%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}
分享
微博
QQ
微信
回复
2024-12-25 14:19:23
相关问题
HarmonyOS 列表List相关问题
652浏览 • 1回复 待解决
HarmonyOS sticky粘性布局
124浏览 • 1回复 待解决
HarmonyOS List控制器Scroller相关
348浏览 • 1回复 待解决
HarmonyOS 证书相关问题
608浏览 • 1回复 待解决
HarmonyOS Lib相关问题
92浏览 • 1回复 待解决
HarmonyOS Worker相关问题
361浏览 • 1回复 待解决
HarmonyOS Grid相关问题
683浏览 • 1回复 待解决
HarmonyOS BindSheet相关问题
776浏览 • 1回复 待解决
HarmonyOS 线程相关问题
778浏览 • 1回复 待解决
HarmonyOS string相关问题
339浏览 • 1回复 待解决
HarmonyOS KVStore 相关问题
494浏览 • 1回复 待解决
HarmonyOS AccountKit相关问题
777浏览 • 1回复 待解决
HarmonyOS List嵌套ListList嵌套Grid问题
219浏览 • 1回复 待解决
HarmonyOS ApplicationContext相关问题
446浏览 • 1回复 待解决
HarmonyOS @Event相关问题
420浏览 • 1回复 待解决
HarmonyOS RN相关问题
838浏览 • 1回复 待解决
HarmonyOS 混淆相关问题
358浏览 • 1回复 待解决
HarmonyOS音频相关问题
923浏览 • 1回复 待解决
HarmonyOS RelativeContainer相关问题
105浏览 • 1回复 待解决
HarmonyOS CardRecognition相关问题
497浏览 • 1回复 待解决
HarmonyOS protobuf相关问题
782浏览 • 1回复 待解决
适配HarmonyOS相关问题
371浏览 • 1回复 待解决
HarmonyOS 打包相关问题
355浏览 • 1回复 待解决