有没有HarmonyOS鸿蒙Next大神知道，小红书，我的页面，吸顶效果实现的原理，以及，首页，关注推荐tsb下的 子tab的折叠隐藏原理，可以具体一点

有没有HarmonyOS鸿蒙Next大神知道，小红书，我的页面，吸顶效果实现的原理，以及，首页，关注推荐tsb下的 子tab的折叠隐藏原理，可以具体一点 有没有大神知道，小红书，我的页面，吸顶效果实现的原理，以及，首页，关注推荐tsb下的 子tab的折叠隐藏原理，可以具体一点

3 回复

主要设置tab能到达的高度, 让tabcontent里面自动滚动

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State listArray: number[] = new Array(100).fill(1)
  @State headerOpacity: number = 1
  @State scrollY: number = 0;
  @State headerHeight: number = 300

  getOpacity(): number {
    const scrollRatio = this.scrollY / this.headerHeight
    if (scrollRatio < 1) {
      return 1 - scrollRatio
    } else {
      return 1
    }
  }

  build() {
    Column() {
      // header
      Row() {
        Text('返回')
      }
      .backgroundColor(Color.Red)
      .width('100%')
      .height(56)
      .padding({
        left: 16
      })

      // 主体内容
      Scroll() {
        Column() {
          // 其他可滚动内容（如Banner）
          Column() {
            Text('Header Content').fontSize(20)
          }
          .width('100%')
          .height(this.headerHeight)
          .backgroundColor(Color.Brown)
          .opacity(this.headerOpacity)

          // Tabs组件：开启吸顶
          Tabs({ barPosition: BarPosition.Start }) {
            TabContent() {
              List({ space: 16 }) {
                ForEach(this.listArray, (item: number, index: number) => {
                  ListItem() {
                    Column() {
                      Text(`${item}_${index}`)
                    }.width('100%').height(120).backgroundColor(Color.Gray).borderRadius(16)
                  }
                }, (_item: number, index: number) => {
                  return `${_item}_${index}`
                })
              }.nestedScroll({
                // 吸顶的核心
                scrollForward: NestedScrollMode.PARENT_FIRST, // Set the effect of scrolling the component to the end: The parent component rolls first, and then rolls itself to the edge
                scrollBackward: NestedScrollMode.SELF_FIRST // Set the effect of rolling the component to the start end: Rolls itself first, and then the parent component scrolls to the edge
              })
              .scrollBar(BarState.Off)
              .padding({
                left: 16,
                right: 16,
                top: 24,
                bottom: 24
              })
            }.tabBar('Tab1')

            TabContent() {
              Text('Page 2').fontSize(18)
            }.tabBar('Tab2')
          }
          .barMode(BarMode.Fixed) // 可选固定宽度模式

        }
      }.scrollBar(BarState.Off).width('100%').onDidScroll((xOffset: number, yOffset: number,) => {
        this.scrollY += yOffset
        this.headerOpacity = this.getOpacity()
      }).layoutWeight(1)

    }.expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

更加详细的参考, 可以参考官方的最佳实践
链接 有吸顶, 分组吸顶的最佳实践说明

demo效果:

更多关于有没有HarmonyOS鸿蒙Next大神知道，小红书，我的页面，吸顶效果实现的原理，以及，首页，关注推荐tsb下的 子tab的折叠隐藏原理，可以具体一点的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS Next中小红书吸顶效果通过ArkUI的Scroll组件与position属性实现。当页面滚动时，监听滚动位置变化，通过条件判断将目标组件position设置为Fixed，并动态调整top值实现吸附顶部。

子Tab折叠隐藏采用Scroll组件的onScroll事件监听滚动方向。向上滚动时通过状态变量控制Tab组件的display属性为None；向下滚动时恢复显示。同时使用transform动画实现平滑过渡效果，避免布局突变。具体通过判断滚动偏移量与阈值的关系触发状态切换。

在HarmonyOS Next中，小红书“我的页面”吸顶效果可通过ScrollView嵌套Flex布局实现。使用onScroll事件监听滚动位置，当达到阈值时通过position: fixed固定顶部栏，同时动态调整下方内容区域的marginTop避免跳动。

首页子Tab折叠隐藏原理：

  1. 使用Tabs组件嵌套TabContent，在onScroll中计算滚动距离
  2. 当向上滚动超过阈值时，通过display: none隐藏Tab栏
  3. 向下滚动时显示，配合transition实现平滑动画
  4. 关键代码示例：
@State isTabVisible: boolean = true
// 滚动处理
onScroll(scrollOffset: number) {
  this.isTabVisible = scrollOffset <= this.prevScrollOffset
  this.prevScrollOffset = scrollOffset
}

这两个效果都依赖滚动监听和动态样式调整，注意在HarmonyOS Next中要使用@State管理组件状态变化。

回到顶部