先展示代码
@Entry
@Component
struct NestedScollCase {
@State message: string = 'Hello World';
build() {
Scroll() {
Column({ space: 20 }) {
Row() {
}
.width('100%')
.height(100)
.backgroundColor(Color.Yellow)
Row() {
}
.width('100%')
.height(100)
.backgroundColor(Color.Yellow)
Row() {
}
.width('100%')
.height(100)
.backgroundColor(Color.Yellow)
Row() {
}
.width('100%')
.height(100)
.backgroundColor(Color.Yellow)
Row() {
}
.width('100%')
.height(100)
.backgroundColor(Color.Yellow)
Row() {
}
.width('100%')
.height(100)
.backgroundColor(Color.Yellow)
Row() {
}
.width('100%')
.height(100)
.backgroundColor(Color.Yellow)
Column({ space: 20 }) {
Row() {
Text('吸顶内容')
.fontSize(20)
}
.width('100%')
.height(150)
.backgroundColor(Color.Gray)
List({ space: 20 }) {
ForEach(Array.from({ length: 30 }), (item: number) => {
ListItem() {
}
.width('100%')
.height(100)
.backgroundColor(Color.Orange)
})
}
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.scrollBar(BarState.Off)
}
.height('100%')
}
}
.width('100%')
.scrollBar(BarState.Off)
}
}
我们知道，当两层容器嵌套时会出现滚动次序冲突的问题，比如在scroll里面放了list，当你手点住list区域往上划时，尽管你的本意是滚动scroll，但实际滚动的会是list，鸿蒙里面有个滚动容器的属性nestedScroll可以解决这个问题
如上述代码片段，只需要设置往上滑时父滚动容器优先滚动，等他滚完了在滚我list不就行了，同理，往下滑时设置自身list优先，也就是先把我list滚动到顶上了你scroll才能滚，nice！
看到这似乎和标题还没有多大关系，别急，我们可以利用这个属性实现一个非常丝滑的吸顶效果，下面正文开始
吸顶吸顶，无非就是滚动时停在最顶部嘛，一个占满屏幕高度的column的第一个元素自然就处于最顶部，如果我们搞一个这样的占满屏幕的column，即设置它的高度为100%，里面放一个滚动容器，把要吸顶的元素放在这个滚动容器的上面，哎神之一手我在搞一个滚动容器把这个column包起来，让这个column在最底部，同时利用nestedScroll按上述方式设置一下优先级，这样当外层滚动到column时，由于高度100%吸顶元素便自然处于最上，并且此时里层容器滚动时吸顶效果就出来了
这样就完成一个丝滑的吸顶效果啦~
