HarmonyOS鸿蒙Next中如何实现向上滑动到一定距离时，才显示appbar

HarmonyOS鸿蒙Next中如何实现向上滑动到一定距离时，才显示appbar 类似于抖音app我的页面，刚开始背景是图片，向上滑动到一定距离后，显示appbar，并显示我的昵称。很多app也都有类似的实现，比如小红书我的页面也是。有没有相关的例子demo参考一下

5 回复

【背景知识】

  • Scroll：可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。
  • nestedScroll：设置前后两个方向的嵌套滚动模式，实现与父组件的滚动联动。
  • onWillScroll：滚动事件回调，Scroll滚动前触发，可以通过该回调返回值指定Scroll将要滚动的偏移。

【解决方案】

当已知List上方组件的高度后，可以通过判断外部Scroll的滚动的偏移量，判断是否吸顶。 示例代码如下：

@Entry
@Component
struct ScrollCeilingList {
  scroller: Scroller = new Scroller()
  itemData: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State isListToTop: boolean = false
  @State headTags: string[] = ['板块', '公告类型', '行业', '排序']
  listScroll: ListScroller = new ListScroller()
  @State currentYOffset: number = 0;
  @State topBannerHeight:number = 200

  @Builder
  itemHead() {
    Row() {
      ForEach(this.headTags, (text: string) => {
        Text(text)
          .fontSize(20)
          .backgroundColor(0xAABBCC)
          .padding(10)
      })
    }
    .height(30)
    .justifyContent(FlexAlign.SpaceBetween)
    .width('100%')
  }

  build() {
    Column({ space: 10 }) {
      Column() {
        Text(this.isListToTop ? 'List吸顶' : 'List未吸顶'))
      }
      .width('100%')
      .backgroundColor(Color.Red)
      .height(30)

      Scroll(this.scroller) {
        Column() {
          // 搜索框
          Stack({ alignContent: Alignment.End }) {
            Column()
              .width('100%')
              .height(this.topBannerHeight)

            Column({ space: 20 }) {
              Row({ space: 20 }) {
                Text('公司')
                TextInput({ placeholder: '请输入' })
                  .type(InputType.Normal)
                  .fontSize('10fp')
                  .layoutWeight(1)
              }
              .width('100%')

              Row({ space: 20 }) {
                Text('标题')
                TextInput({ placeholder: '请输入' })
                  .type(InputType.Normal)
                  .fontSize('10fp')
                  .layoutWeight(1)
              }
              .width('100%')
            }
            .padding(20)
          }

          Column() {
            this.itemHead()
            List({ scroller: this.listScroll }) {
              ForEach(this.itemData, (item: number) => {
                ListItem() {
                  Text(`${item}`)
                    .height(80)
                    .width('100%')
                    .textAlign(TextAlign.Center)
                    .backgroundColor(0xDDDDDD)
                    .margin({ bottom: 5 })
                }
              })
            }
            .scrollBar(BarState.Off)
            .nestedScroll({
              scrollForward: NestedScrollMode.PARENT_FIRST,
              scrollBackward: NestedScrollMode.SELF_FIRST
            })
          }.height('100%')
        }
      }.scrollBar(BarState.Off)
      .onWillScroll(()=>{
        this.currentYOffset = this.scroller.currentOffset().yOffset;
        if(this.currentYOffset < 200){
          this.isListToTop = false
        }
      })
      .onScrollEdge((side: Edge) => {
        if (side === Edge.Bottom) {
          this.isListToTop = true
        }
      })
    }
  }
}

更多关于HarmonyOS鸿蒙Next中如何实现向上滑动到一定距离时，才显示appbar的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


借楼询问一下，鸿蒙5 里怎么实现app bar，我这个app bar一直显示就行。。

这是安卓控件的一个特性，鸿蒙模拟写一个也比较简单，上滑判断快要到顶部，渐变显示顶部菜单，默认隐藏。

在HarmonyOS Next中，可通过Scroll组件的onScroll事件监听滑动位置。使用ScrollState参数获取当前滚动偏移量scrollOffset，当该值达到预设阈值时，通过状态变量控制AppBar的显示隐藏。示例代码片段：

@State isAppBarVisible: boolean = false
private threshold: number = 200

Scroll() {
  // 页面内容
}
.onScroll((scrollOffset: number, scrollState: ScrollState) => {
  this.isAppBarVisible = scrollOffset > this.threshold
})

在布局中使用条件渲染控制AppBar：

if (this.isAppBarVisible) {
  AppBar({ title: '标题' })
}

在HarmonyOS Next中，可以通过Scroll组件配合onScroll事件监听滑动距离，结合条件渲染实现该效果。以下是核心实现思路：

  1. 使用Scroll组件作为滚动容器，通过onScroll回调获取滚动偏移量
Scroll({ scrollable: ScrollDirection.Vertical }) {
  // 页面内容
}
.onScroll((xOffset: number, yOffset: number) => {
  this.scrollY = yOffset
})
  1. 定义状态变量控制AppBar显示：
@State isAppBarVisible: boolean = false
@State scrollY: number = 0
  1. 在滚动监听中判断临界值：
.onScroll((xOffset, yOffset) => {
  this.scrollY = yOffset
  this.isAppBarVisible = yOffset > CRITICAL_SCROLL_VALUE
})
  1. 使用条件渲染控制AppBar：
if (this.isAppBarVisible) {
  Column() {
    // AppBar内容
  }
}
  1. 可通过@Provide和@Consume实现跨组件状态共享，确保滚动状态同步。

建议参考官方示例中的"ArkUI-页面滑动隐藏标题栏"案例，其中演示了滑动显隐控制的具体实现。实际开发时需注意滑动临界值的合理设定和动画过渡效果，以提升用户体验。

回到顶部