HarmonyOS鸿蒙Next吸顶效果示例代码

HarmonyOS鸿蒙Next吸顶效果示例代码

介绍

列表吸顶场景

  1. 向上滑动，list也会跟着上滑；
  2. list标题上滑到顶部时，不会再给滚动，只有list的子项滑动。

demo详情链接

https://gitee.com/scenario-samples/list-demo

2 回复

在HarmonyOS（鸿蒙Next）中实现吸顶效果，可以使用ScrollView和Flex布局结合PositionLayout来实现。以下是一个简单的示例代码：

import { ScrollView, Flex, Text, PositionLayout } from '@ohos.arkui';

@Entry
@Component
struct StickyHeaderExample {
  build() {
    ScrollView() {
      Flex({ direction: 'column' }) {
        // 吸顶部分
        PositionLayout({ position: 'sticky', top: 0 }) {
          Text('吸顶标题')
            .fontSize(20)
            .backgroundColor('#f0f0f0')
            .padding(10);
        }

        // 内容部分
        for (let i = 0; i < 20; i++) {
          Text(`内容项 ${i}`)
            .fontSize(16)
            .padding(10)
            .border({ width: 1, color: '#ddd' });
        }
      }
    }
    .width('100%')
    .height('100%');
  }
}

在这个示例中，PositionLayout的position属性设置为sticky，并指定top为0，使得该组件在滚动时会固定在顶部。ScrollView用于包裹内容，Flex布局用于排列内容项。

更多关于HarmonyOS鸿蒙Next吸顶效果示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS中实现吸顶效果，可以通过Column、ScrollView和Stack组件结合使用。以下是一个简单的示例代码：

@Entry
@Component
struct StickyHeaderExample {
  @State private isSticky: boolean = false

  build() {
    Column() {
      ScrollView() {
        Column() {
          // 顶部内容
          Text('顶部内容')
            .fontSize(20)
            .margin({ top: 20 })

          // 长列表内容
          ForEach(Array.from({ length: 50 }), (item, index) => {
            Text(`列表项 ${index}`)
              .fontSize(16)
              .margin({ top: 10 })
          })
        }
      }
      .onScroll((event: ScrollEvent) => {
        // 根据滚动位置判断是否吸顶
        this.isSticky = event.scrollY > 100
      })

      // 吸顶组件
      if (this.isSticky) {
        Stack() {
          Text('吸顶内容')
            .fontSize(20)
            .backgroundColor(Color.White)
            .padding(10)
        }
        .width('100%')
        .position({ x: 0, y: 0 })
      }
    }
  }
}

代码说明：

  1. ScrollView：用于包裹长列表内容，监听滚动事件。
  2. onScroll：根据滚动位置判断是否启用吸顶效果。
  3. Stack：用于实现吸顶效果，当isSticky为true时显示吸顶内容。

通过这种方式，可以实现页面的吸顶效果。

回到顶部