HarmonyOS鸿蒙Next中List的悬停效果，可以让ListGroup悬停在界面的某个位置而不是List的头部或底部
HarmonyOS鸿蒙Next中List的悬停效果，可以让ListGroup悬停在界面的某个位置而不是List的头部或底部 1、List在效果中占满全屏
2、当List上滑时，在List顶部会覆盖一层导航视图A。（录屏中由透明变为红色的图层）
3、当ListItemGroup滚动到导航视图A底部时，悬停到导航视图A底部，而不是悬停在列表的开始位置
请参考demo ```javascript @Entry @Component struct StickyNestedScroll { @State arr: number[] = [] private scroller:Scroller = new Scroller(); @Styles listCard() { .backgroundColor(Color.White) .height(72) .width(“100%”) .borderRadius(12) } build() { Scroll() { Column() { TextInput() Column() { Text(“Title Area”) .width(“100%”) .height(“100”) .backgroundColor(’#0080DC’) .textAlign(TextAlign.Center) Scroll() { Column() { Row() { Text(“收藏”).width(“50%”) .textAlign(TextAlign.Center) Text(“历史”).width(“50%”) .textAlign(TextAlign.Center) }.height(“64”).width(“100%”) .backgroundColor(Color.Green) List({ space: 10 , scroller:this.scroller}) { ForEach(this.arr, (item: number) => { ListItem() { Text(“item” + item) .fontSize(16) }.listCard() }, (item: number) => item.toString()) }.width(“100%”) .edgeEffect(EdgeEffect.None) .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.PARENT_FIRST }) .height(“100%”) } } .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST }) .layoutWeight(1) .edgeEffect(EdgeEffect.None) .scrollBar(BarState.Off) }.height(“100%”) }.width(“100%”) } .onScrollFrameBegin((offset: number, state: ScrollState)=>{ if (this.scroller.currentOffset().yOffset > 0) { return {offsetRemain:0} } return {offsetRemain:offset} }) .edgeEffect(EdgeEffect.None) .backgroundColor(’#DCDCDC’) .scrollBar(BarState.Off) .width(‘100%’) .height(‘100%’) } aboutToAppear() { for (let i = 0; i < 30; i++) { this.arr.push(i) } } } ```
请参考demo ```javascript @Entry @Component struct Index { @State op: number = 1 @State ShowSingleTitle: boolean = false; private scroller: Scroller = new Scroller() words: string[] = [’’] build() { Column() { this.waterFlowBody() } .width(‘100%’) .height(‘100%’) } @Builder waterFlowBody() { Column() { if (this.ShowSingleTitle) { Text(‘发现’) .fontSize(20) .fontWeight(FontWeight.Bold) .textAlign(TextAlign.Start) .zIndex(99) } this.messageFlow() } .alignItems(HorizontalAlign.Start) .backgroundColor(Color.Grey) } @Builder messageFlow() { Column() { Scroll(this.scroller) { Column() { Column() { Text(‘发现’) .fontSize(30) .fontWeight(FontWeight.Bold) .textAlign(TextAlign.Start) Image($r(‘app.media.startIcon’)) .width(‘50%’) .objectFit(ImageFit.Fill) } .width(‘100%’) .alignItems(HorizontalAlign.Start) .padding({ bottom: 30 }) .opacity(this.op) Tabs({ barPosition: BarPosition.Start }) { TabContent() { List({ space: 10 }) { ForEach(this.words, (item: string) => { ListItem() { Column() { }.height(2000).width(‘100%’).backgroundColor(Color.Orange) } }, (item: string) => item) } .width(“100%”) .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST }) }.tabBar(“Tab1”) TabContent() { }.tabBar(“Tab2”) } .vertical(false) .height(“100%”) }.width(“100%”) } .scrollBar(BarState.Off) .width(‘100%’) .height(‘100%’) .onScroll(() => { const height = this.scroller.currentOffset().yOffset if (height > 225) { this.ShowSingleTitle = true } else { this.ShowSingleTitle = false; } this.handleOP(height) }) }.backgroundColor(Color.Transparent) } handleOP(height: number) { this.op = 1 - height / 250 } } ```
更多关于HarmonyOS鸿蒙Next中List的悬停效果，可以让ListGroup悬停在界面的某个位置而不是List的头部或底部的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，可以通过自定义布局和事件处理来实现ListGroup的悬停效果。具体步骤如下：
-
自定义布局：创建一个自定义布局组件，用于承载List和悬停的ListGroup。可以使用
Stack布局来叠加List和ListGroup。 -
滚动监听：为List组件添加滚动监听事件，监听List的滚动位置。当滚动到特定位置时，动态调整ListGroup的位置。
-
位置计算：根据List的滚动位置，计算ListGroup的悬停位置。可以使用
scrollY属性获取List的垂直滚动距离，并根据需要设置ListGroup的top或bottom属性。 -
动态更新：在滚动监听事件中，动态更新ListGroup的位置，使其保持在界面的指定位置。
示例代码片段：
import { List, ListGroup, Stack, ScrollView, ScrollEvent } from '@ohos/harmony';
class StickyListGroup extends Stack {
private listGroup: ListGroup;
private scrollView: ScrollView;
constructor() {
super();
this.listGroup = new ListGroup();
this.scrollView = new ScrollView();
this.scrollView.onScroll((event: ScrollEvent) => {
const scrollY = event.scrollY;
const stickyPosition = 100; // 悬停位置
if (scrollY >= stickyPosition) {
this.listGroup.style.top = `${stickyPosition}px`;
} else {
this.listGroup.style.top = '0px';
}
});
this.addComponent(this.scrollView);
this.addComponent(this.listGroup);
}
}
