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

介绍

本示例通过设置nestedScroll属性，实现Tab组件的TabBar和List组件吸顶效果。

实现吸顶效果源码链接

效果预览

图片名称

使用说明

卡片数据来自预置用例，可根据实际情况自行修改。同时可以初始化偏移量列表。

实现思路

设置scrollForward的滚动模式为NestedScrollMode.PARENT_FIRST：

当控制Data_List内元素向前滚动时，其父组件Column先滚动，覆盖Scroll组件嵌套的Column组件内的Stack组件（搜索框），随后Column组件触碰顶部边缘，触发边缘效果，从而将Class_List固定在顶部

设置scrollBackward的滚动模式为NestedScrollMode.SELF_FIRST：

当控制Data_List内元素向后滚动时，Data_List的内容先滚动，直至滚动到Data_List最顶部后，父组件Column开始滚动

设置scrollForward的滚动模式为NestedScrollMode.PARENT_FIRST：

当控制List内元素向前滚动时，其父组件TabContent先滚动，覆盖Scroll组件嵌套的Column组件内的Image组件，随后Tabs组件触碰顶部边缘，触发边缘效果，从而固定在顶部

设置scrollBackward的滚动模式为NestedScrollMode.SELF_FIRST：

当控制List内元素向后滚动时，List的内容先滚动，直至滚动到List最顶部后，父组件TabContent开始滚动

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

yuanlaile 1楼•8 天前

你好，请问自定义的tabBar是不是用不了这个？

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

gougou168 2楼•8 天前

开发者您好，您的问题已收到，我们的研发人员正在处理中，请耐心等待。

songsunli 3楼•8 天前

开发者您好，通过@Builder自定义tabBar的内容和样式，不会影响tabBar的吸顶效果。若未解决，请您详细描述问题情况，感谢您的支持。

nodeper 4楼•8 天前

在HarmonyOS鸿蒙Next中实现吸顶效果，可以使用ScrollView和Stack组件结合onScroll事件来实现。以下是一个示例代码：

import { ScrollView, Stack, Text } from '@ohos/hap';
import { useState } from '@ohos/hap';

function StickyHeaderExample() {
  const [isSticky, setIsSticky] = useState(false);

  const handleScroll = (event) => {
    const scrollY = event.nativeEvent.contentOffset.y;
    if (scrollY > 100) {
      setIsSticky(true);
    } else {
      setIsSticky(false);
    }
  };

  return (
    <ScrollView onScroll={handleScroll} scrollEventThrottle={16}>
      <Stack>
        <Text style={{ height: 100, backgroundColor: 'lightblue' }}>Header Content</Text>
        <Text style={{ height: 1000, backgroundColor: 'lightgray' }}>Scrollable Content</Text>
      </Stack>
      {isSticky && (
        <Text style={{ position: 'fixed', top: 0, left: 0, right: 0, height: 50, backgroundColor: 'lightblue' }}>
          Sticky Header
        </Text>
      )}
    </ScrollView>
  );
}

export default StickyHeaderExample;

在这个示例中，ScrollView组件用于处理滚动事件，Stack组件用于布局。handleScroll函数监听滚动位置，当滚动超过100像素时，设置isSticky为true，显示吸顶的Text组件。position: 'fixed'确保吸顶组件始终固定在顶部。

nodeper 5楼•8 天前

在HarmonyOS鸿蒙Next中实现吸顶效果，可以通过使用ScrollView和PositionLayout来实现。以下是一个简单的示例代码：

import { ScrollView, PositionLayout, Text, View } from '@ohos/harmony';

export default class StickyHeaderExample extends View {
  build() {
    let scrollView = new ScrollView();
    let stickyHeader = new Text();
    stickyHeader.text = "吸顶标题";
    stickyHeader.style.position = 'sticky';
    stickyHeader.style.top = '0';
    stickyHeader.style.backgroundColor = '#fff';

    scrollView.addChild(stickyHeader);

    for (let i = 0; i < 20; i++) {
      let item = new Text();
      item.text = `列表项 ${i}`;
      scrollView.addChild(item);
    }

    this.addChild(scrollView);
  }
}

在这个示例中，stickyHeader通过设置position: 'sticky'和top: '0'实现了吸顶效果。当用户滚动ScrollView时，stickyHeader会固定在顶部。