HarmonyOS鸿蒙Next中Scroll组件和Tab组件嵌套滚动卡在固定位置
HarmonyOS鸿蒙Next中Scroll组件和Tab组件嵌套滚动卡在固定位置 在TabContent组件里面的Scroll组件设置nestedScroll，如果滚动的时候手指慢慢滚动固定在一个固定的位置，不松手一段时间，在松手，TabContent的内容会卡在固定的位置不动，不能滚动到tabContent的固定位置，该如何解决
3 回复
参考如下demo：
/**
* @description:
* @author WinWang
* @version 1.0.0
* @date 2024/08/14
*/
@Entry
@Component
export struct TestHorizontalPage {
@State dataList: Array<number> = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
@State scrollIndex: number = -1
private scrollScroller = new Scroller()
private rightScroller = new Scroller()
/**
* 滚动到左侧的scrollEdge的值记录
*/
private leftScrollEdge = 0
/**
* 滚动到右侧的scrollEdge的值记录
*/
private rightScrollEdge = 0
/**
* 嵌套滚动头部处理
*/
@State scrollForward: NestedScrollMode = NestedScrollMode.SELF_ONLY
/**
* 嵌套滚动尾部处理
*/
@State scrollBackward: NestedScrollMode = NestedScrollMode.SELF_ONLY
/**
* 横向滚动数据距离记录
*/
@State xScrollOffset: number = 0
@State xScrollOffset1: number = 0
private titleHeight = 30
private itemHeight = 50
async aboutToAppear() {
}
build() {
Column() {
Scroll(this.scrollScroller) {
Column() {
Stack({ alignContent: Alignment.Start | Alignment.Top }) {
Row() {
Text(`第二列 标题`).width(100).textAlign(TextAlign.Center)
Text(`第三列 标题`).width(100).textAlign(TextAlign.Center)
Text(`第四列 标题`).width(100).textAlign(TextAlign.Center)
Text(`第五列 标题`).width(100).textAlign(TextAlign.Center)
Text(`第六列 标题`).width(100).textAlign(TextAlign.Center)
Text(`第七列 标题`).width(100).textAlign(TextAlign.Center)
}
.height(this.titleHeight)
.margin({ left: 100 })
.zIndex(0)
Text(`---表头---`)
.width(100)
.textAlign(TextAlign.Center)
.height(this.titleHeight)
.zIndex(1)
.position({ x: this.xScrollOffset1, y: 0 })
.markAnchor({ x: 0, y: 0 })
.backgroundColor(Color.White)
}
List({ scroller: this.rightScroller }) {
ForEach(this.dataList, (item: number, index) => {
ListItem() {
Stack({ alignContent: Alignment.Start }) {
Row() {
Text(`第二列${item}`).width(100).textAlign(TextAlign.Center)
Text(`第三列${item}`).width(100).textAlign(TextAlign.Center)
Text(`第四列${item}`).width(100).textAlign(TextAlign.Center)
Text(`第五列${item}`).width(100).textAlign(TextAlign.Center)
Text(`第六列${item}`).width(100).textAlign(TextAlign.Center)
Text(`第七列${item}`).width(100).textAlign(TextAlign.Center)
}
.margin({ left: 100 })
.zIndex(0)
.height('100%')
.backgroundColor(index % 2 == 0 ? '#FC4447' : '#15B972')
Text(`第一列${item}`)
.width(100)
.height('100%')
.textAlign(TextAlign.Center)
.zIndex(1)
.position({ x: this.xScrollOffset1, y: 0 })
.markAnchor({ x: 0, y: 0 })
.backgroundColor(index % 2 == 0 ? '#FC4447' : '#15B972')
}
.height(this.itemHeight)
}
})
}
.width(700)
.height("100%")
.cachedCount(5)
.edgeEffect(EdgeEffect.None)
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
}
}
.scrollBar(BarState.Off)
.scrollable(ScrollDirection.Horizontal)
.height("100%")
.flexShrink(1)
.onWillScroll((xOffset: number, yOffset: number, scrollState: ScrollState) => {
this.xScrollOffset1 = this.scrollScroller.currentOffset().xOffset + xOffset
})
.onDidScroll(() => {
let offsetX = this.scrollScroller.currentOffset().xOffset;
this.xScrollOffset = offsetX
if (this.xScrollOffset == this.leftScrollEdge) {
this.scrollForward = NestedScrollMode.SELF_ONLY
} else if (this.xScrollOffset == this.rightScrollEdge) {
this.scrollBackward = NestedScrollMode.SELF_ONLY
} else {
this.scrollBackward = NestedScrollMode.SELF_ONLY
this.scrollForward = NestedScrollMode.SELF_ONLY
}
console.debug(`横向滚动-滚动:onScroll-----${offsetX}`)
})
.onReachStart(() => {
this.scrollBackward = NestedScrollMode.SELF_FIRST
this.scrollForward = NestedScrollMode.SELF_FIRST
this.leftScrollEdge = this.xScrollOffset
})
.onReachEnd(() => {
this.scrollBackward = NestedScrollMode.SELF_FIRST
this.scrollForward = NestedScrollMode.SELF_FIRST
this.rightScrollEdge = this.xScrollOffset
})
.nestedScroll({
scrollForward: this.scrollForward,
scrollBackward: this.scrollBackward
})
}
.height("100%")
.width("100%")
}
}
更多关于HarmonyOS鸿蒙Next中Scroll组件和Tab组件嵌套滚动卡在固定位置的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中，Scroll组件和Tab组件嵌套使用时，可能会出现滚动卡在固定位置的问题。这通常是由于嵌套滚动容器的滚动机制冲突导致的。Scroll组件和Tab组件各自管理自己的滚动状态，当它们嵌套时，可能会出现滚动事件被截获或冲突的情况，导致滚动无法顺畅进行。
要解决这个问题，可以考虑使用ScrollState来管理滚动状态，确保两个组件的滚动行为协调一致。通过在Scroll组件和Tab组件中分别设置ScrollState，可以避免滚动冲突。此外，可以尝试使用NestedScrollView或者CoordinatorLayout等布局容器，这些容器能够更好地处理嵌套滚动的情况。
在代码实现上，可以通过监听滚动事件，动态调整Scroll组件和Tab组件的滚动位置，确保它们之间的滚动行为不会相互干扰。如果仍然存在问题，可以检查布局结构，确保没有不必要的嵌套或复杂的层级关系。
总之，通过合理管理滚动状态和使用适当的布局容器，可以有效解决Scroll组件和Tab组件嵌套滚动卡在固定位置的问题。
