HarmonyOS 鸿蒙Next中滚动时的吸顶效果怎么实现？

请尝试如下方案,是否满足您的需求

@Entry
@Component
struct Index {
  @State arr: number[] = [1,2,3,4,5,6,7,8,9,10,11,12,13,14]

  build() {
    Scroll() {
      Column() {
        Text("Scroll第一部分 Area")
          .width("100%")
          .height(200)
          .backgroundColor('#0080DC')
          .textAlign(TextAlign.Center)
        Column(){
          // 第二部分吸顶效果主要是通过设置nestedScroll属性以及父组件设置高度100%引起的
          // 无论多段内容，只需要将吸顶内容与list组件放入同一个父容器中.且为最后一段内容即可形成该效果
          Text("Scroll第二部分 Area").width("100%").height(100).backgroundColor(Color.Transparent)
            .textAlign(TextAlign.Center).fontColor(Color.Black)
          List({ space: 10 }) {
            ForEach(this.arr, (item: number) => {
              ListItem() {
                Text("item" + item).fontSize(16).height(72).width('100%').border({width:1}).fontColor(Color.Black)
              }
            }, (item: string) => item)
          }.width("100")
            .height("calc(100% - 100vp)").backgroundColor(Color.Blue)
            .edgeEffect(EdgeEffect.Spring)
            .nestedScroll({
              scrollForward: NestedScrollMode.PARENT_FIRST,
              scrollBackward: NestedScrollMode.SELF_FIRST
            })
        }.height("100%")
      }.width("100%")
    }.edgeEffect(EdgeEffect.Spring)
      .friction(0.6)
      .backgroundColor(Color.White)
      .scrollBar(BarState.Off)
      .width('100%')
      .height('100%')
  }
}

也可以尝试下以下方案

通过onAreaChange 变化来判断

Text("Scroll第二部分 Area").width("100%").height(100).backgroundColor(Color.Transparent).onAreaChange((oldValue: Area, newValue: Area) => {
  console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
})

更多关于HarmonyOS 鸿蒙Next中滚动时的吸顶效果怎么实现？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 2楼•4 天前

在HarmonyOS（鸿蒙Next）中，实现滚动时的吸顶效果可以通过使用ScrollView和Stack组件结合position属性来完成。以下是一个简单的实现步骤：

布局结构：首先，确保你的布局中包含一个ScrollView，用于处理滚动事件。在ScrollView内部，使用Stack组件来管理需要吸顶的元素和其他内容。
吸顶元素：在Stack组件中，将需要吸顶的元素放置在顶部。通过设置该元素的position属性为fixed，并指定top值，使其在滚动时保持在屏幕顶部。
滚动监听：使用ScrollView的onScroll事件监听滚动位置。当滚动到指定位置时，动态调整吸顶元素的样式或位置，以实现吸顶效果。
样式调整：根据需要，可以为吸顶元素添加背景色、阴影等样式，以增强视觉效果。

以下是一个简单的代码示例：

import React, { useState } from 'react';
import { ScrollView, Stack, Text, View } from '@ohos/harmonyos';

const App = () => {
  const [isSticky, setIsSticky] = useState(false);

  const handleScroll = (event) => {
    const scrollY = event.nativeEvent.contentOffset.y;
    if (scrollY > 100) { // 100为吸顶触发位置
      setIsSticky(true);
    } else {
      setIsSticky(false);
    }
  };

  return (
    <ScrollView onScroll={handleScroll}>
      <Stack>
        <View style={{ height: 200, backgroundColor: '#ccc' }} />
        <View style={{ height: 200, backgroundColor: '#ddd' }} />
        <View style={{ height: 200, backgroundColor: '#eee' }} />
        <View style={{ height: 200, backgroundColor: '#fff' }} />
        <View style={{ position: isSticky ? 'fixed' : 'relative', top: 0, backgroundColor: '#ff0', padding: 10 }}>
          <Text>吸顶元素</Text>
        </View>
      </Stack>
    </ScrollView>
  );
};

export default App;

通过上述方法，可以在HarmonyOS中实现滚动时的吸顶效果。

sinazl 3楼•4 天前

在HarmonyOS鸿蒙Next中实现滚动时的吸顶效果，可以通过ScrollView和Column组件结合position属性来实现。首先，将需要吸顶的组件放在ScrollView的顶部，然后使用Column包裹内容。通过监听滚动事件，动态调整吸顶组件的position属性为fixed，使其在滚动时保持在顶部。示例代码如下：

ScrollView() {
  Column() {
    // 吸顶组件
    Text('吸顶内容').position({ top: 0 })
    // 其他内容
    ForEach(this.items, (item) => {
      Text(item)
    })
  }
}

通过这种方式，可以在滚动时实现吸顶效果。