HarmonyOS 鸿蒙Next 监听list的滑动方向
HarmonyOS 鸿蒙Next 监听list的滑动方向
1、按钮当list列表上滑隐藏
2、下滑的时候显示
2 回复
可以参考以下demo：
enum ScrollPosition {
start,
center,
end
}
@Entry
@Component
struct Index2 {
@State listPosition: number = ScrollPosition.start
@State scrollPosition: number = ScrollPosition.start
@State showTitle: boolean = false
@State currentYOffset: number = 0
@State currentScrollOffsetInList: number = 0
private currentScrollStateInList: ScrollState | null = null
@State msg1: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
@State msg2: string[] = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
@State msg3: string[] = ['aa', 'bb', 'cc', 'dd', 'ee', 'ff', 'gg', 'hh', 'ii', 'jj']
private scrollerForScroll: Scroller = new Scroller()
private scrollerForList: Scroller = new Scroller()
scrollGetData: number[] = []
private lastOffset: number = 0
build() {
Stack({ alignContent: Alignment.Top }) {
Scroll(this.scrollerForScroll) {
Column() {
Image($r('app.media.app_icon'))
.width('100%')
.height('40%')
Tabs({ barPosition: BarPosition.Start }) {
TabContent() {
Column() {
List({ space: 10, scroller: this.scrollerForList }) {
ForEach(this.msg3, (item: string) => {
ListItem() {
Text('ListItem' + item)
.width('100%')
.height('100%')
.borderRadius(15)
.fontSize(24)
.textAlign(TextAlign.Center)
.backgroundColor(Color.White)
}
.width('100%')
.height(100)
}, (item: string) => item)
}
.padding({ left: 10, right: 10 })
.width('100%')
.edgeEffect(EdgeEffect.None)
.scrollBar(BarState.Off)
.onReachStart(() => {
this.listPosition = ScrollPosition.start
})
.onReachEnd(() => {
this.listPosition = ScrollPosition.end
})
.onScrollFrameBegin((offset: number, state: ScrollState) => {
// 滑动到列表中间时
if (!((this.listPosition == ScrollPosition.start && offset < 0)
|| (this.listPosition == ScrollPosition.end && offset > 0))) {
this.listPosition = ScrollPosition.center
}
// 如果页面已滚动到底部，列表不在顶部或列表有正向偏移量
if (this.scrollPosition == ScrollPosition.end
&& (this.listPosition != ScrollPosition.start || offset > 0)) {
return { offsetRemain: offset };
} else {
this.scrollerForScroll.scrollBy(0, offset)
return { offsetRemain: 0 };
}
})
.onScroll((scrollOffset: number, scrollState: ScrollState) => {
this.currentScrollOffsetInList = scrollOffset
this.currentScrollStateInList = scrollState
if (scrollOffset != 0) {
this.lastOffset = scrollOffset
}
//记录打印0前的最后一个值
console.log(this.lastOffset + ' this.lastOffset')
console.log(scrollOffset + '');
(scrollOffset <= 0 && this.lastOffset < 0) ? this.showTitle = false : this.showTitle = true
})
}
}.tabBar('顺序')
TabContent() {
Column().width('100%').height('100%').backgroundColor('#007DFF')
}.tabBar('倒叙')
}
.vertical(false)
.barMode(BarMode.Fixed)
.barWidth(360)
.barHeight(56)
.width("100%")
.height("92%")
.backgroundColor('#F1F3F5')
}
}
.scrollBar(BarState.Off)
.width('100%')
.height('100%')
.onDidScroll((scrollOffset: number, scrollState: ScrollState)=> {
console.log('onDidScroll1',JSON.stringify(scrollOffset),JSON.stringify(scrollState));
this.currentYOffset = this.scrollerForScroll.currentOffset().yOffset
// 非（页面在顶部或页面在底部），则页面在中间
if (!((this.scrollPosition == ScrollPosition.start && scrollState < 0)
|| (this.scrollPosition == ScrollPosition.end && scrollState > 0))) {
this.scrollPosition = ScrollPosition.center
}
})
.onScrollEdge((side: Edge) => { // 滚动到边缘事件回调
if (side == Edge.Top) {
// 页面在顶部
this.scrollPosition = ScrollPosition.start
} else if (side == Edge.Bottom) {
// 页面在底部
this.scrollPosition = ScrollPosition.end
}
})
.onScrollFrameBegin(offset => {
if (this.scrollPosition = ScrollPosition.end) {
return { offsetRemain: 0 }
} else {
return { offsetRemain: offset }
}
})
if (!this.showTitle) {
Row() {
Text('开始')
.fontSize(24)
}
.justifyContent(FlexAlign.Center)
.backgroundColor(Color.Red)
.width('80%')
.height('8%')
.position({ x: '10%', y: '90%' })
}
}
.width('100%')
.height('100%')
.backgroundColor(0xDCDCDC)
}
}
更多关于HarmonyOS 鸿蒙Next 监听list的滑动方向的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，监听列表（list）的滑动方向通常可以通过使用组件提供的滚动监听事件来实现。以下是一个简要的方法来实现该功能：
-
使用
ListContainer或类似组件：首先，确保你使用的是支持滚动监听的列表组件，如ListContainer。 -
设置滚动监听器：通过组件的滚动监听接口（如
setScrollListener），可以注册一个滚动监听器。在这个监听器中，你可以获取滚动的状态信息。 -
判断滑动方向：在滚动监听器的回调中，通过对比滚动前后的位置或速度，可以判断滑动的方向。例如，如果当前位置比上一次位置大，则为向下滑动；反之则为向上滑动。
-
处理滑动方向：根据滑动方向，你可以在回调中执行相应的逻辑，如更新UI、记录状态等。
示例代码片段（伪代码）：
listContainer.setScrollListener(new ScrollListener() {
@Override
public void onScrollStateChanged(int state) {
// 获取当前滚动位置
int currentScrollY = listContainer.getScrollY();
// 判断滑动方向（这里假设有上一次滚动位置lastScrollY）
if (currentScrollY > lastScrollY) {
// 向下滑动
} else if (currentScrollY < lastScrollY) {
// 向上滑动
}
// 更新lastScrollY为当前位置
lastScrollY = currentScrollY;
}
});
如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html
