HarmonyOS 鸿蒙Next:Scroll、Tabs、List嵌套时,给List添加nestedScroll无法解决滚动冲突
HarmonyOS 鸿蒙Next:Scroll、Tabs、List嵌套时,给List添加nestedScroll无法解决滚动冲突
Scrol->Tabs->List嵌套时,给List添加nestedScroll无法解决滚动冲突
Scroll包含Tabs,Tabs中的TabContent包含List,此时给List增加:
.nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST })
期望Scroll和List同时只有一个滚动,但是现在是两个都可以响应滚动
更多关于HarmonyOS 鸿蒙Next:Scroll、Tabs、List嵌套时,给List添加nestedScroll无法解决滚动冲突的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
参考demo:
@Entry
@Component
struct page240429110107050 {
@State message: string = 'Hello World'
@State arr: number[] = []
private touchDown: boolean = false;
private listTouchDown: boolean = false;
private scrolling: boolean = false;
private scroller: Scroller = new Scroller()
private listScroller: Scroller = new Scroller()
@Styles
listCard() {
.backgroundColor(Color.White)
.height(72)
.width("100%")
.borderRadius(12)
}
build() {
Scroll(this.scroller) {
Column() {
Text("Scroll Area")
.width("100%")
.height("400")
.backgroundColor('#0080DC')
.textAlign(TextAlign.Center)
Tabs({ barPosition: BarPosition.Start }) {
TabContent() {
List({ space: 10, scroller: this.listScroller }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text("item" + item)
.fontSize(16)
}.listCard()
}, (item: number) => item.toString())
}.width("100%")
.edgeEffect(EdgeEffect.Spring)
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.onTouch((event: TouchEvent) => {
if (event.type == TouchType.Down) {
this.listTouchDown = true;
} else if (event.type == TouchType.Up) {
this.listTouchDown = false;
}
})
}.tabBar("Tab1")
TabContent() {
}.tabBar("Tab2")
}
.vertical(false)
.height("100%")
// .height(300)
// Column()
// .width('100%')
// .height(1000)
}.width("100%")
}
.onTouch((event: TouchEvent) => {
if (event.type == TouchType.Down) {
this.touchDown = true;
} else if (event.type == TouchType.Up) {
this.touchDown = false;
}
})
.onScrollFrameBegin((offset: number, state: ScrollState) => {
if (this.scrolling && offset > 0) {
let yOffset: number = this.scroller.currentOffset().yOffset
if (yOffset >= 400) {
this.listScroller.scrollBy(0, offset)
return { offsetRemain: 0 }
} else if (yOffset + offset > 400) {
this.listScroller.scrollBy(0, yOffset + offset - 400)
return { offsetRemain: 400 - yOffset }
}
}
return { offsetRemain: offset }
})
.onScrollStart(() => {
if (this.touchDown && !this.listTouchDown) {
this.scrolling = true;
}
})
.onScrollStop(() => {
this.scrolling = false;
})
.edgeEffect(EdgeEffect.Spring)
.backgroundColor('#DCDCDC')
.scrollBar(BarState.Off)
.width('100%')
.height('100%')
}
aboutToAppear() {
for (let i = 0; i < 30; i++) {
this.arr.push(i)
}
}
}
更多关于HarmonyOS 鸿蒙Next:Scroll、Tabs、List嵌套时,给List添加nestedScroll无法解决滚动冲突的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙系统中,当你遇到在Scroll、Tabs、List嵌套场景下,给List添加nestedScroll无法解决滚动冲突的问题时,通常这是因为嵌套滚动组件的滚动事件传递和处理机制发生了冲突。
鸿蒙系统提供了多种滚动组件,它们之间的滚动行为需要精确控制以避免冲突。对于Scroll、Tabs、List的嵌套情况,可以尝试以下方法解决滚动冲突:
-
检查Scroll组件的滚动方向:确保Scroll组件的滚动方向与内部List的滚动方向不冲突。例如,如果Scroll是垂直滚动的,那么内部的List也应该是垂直滚动的,或者通过布局调整避免同时触发滚动。
-
使用NestedScroll属性:虽然你提到添加了nestedScroll无效,但请确保nestedScroll属性的使用是正确的。检查是否所有相关的滚动组件都正确设置了nestedScroll属性,并且滚动事件的监听和处理逻辑是否正确。
-
自定义滚动逻辑:如果系统提供的nestedScroll属性无法满足需求,可以考虑自定义滚动逻辑。通过监听滚动事件,手动控制滚动行为,以解决滚动冲突。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html