通过Scroll、nestedScroll实现京东秒杀嵌套滚动效果
通过Scroll、nestedScroll实现京东秒杀嵌套滚动效果
当上拉时，外层先滚动慢慢的黄色签到图片会消失、然后List列表可以继续上拉
效果预览：
实现思路：
- 实现页面结构布局，红、黄、绿、列表
scss
@Entry
@Component
struct Index {
build() {
Column() {
// 红色（不要放到Column 因为后续下面黄色、蓝、列表需要滚动 而这个红色不需要）
Text().width('100%').height(150).backgroundColor(Color.Red)
// 下述后续要上拉滚动
Column() {
// 黄色签到
Text().width('100%').height(100).backgroundColor(Color.Yellow)
// 蓝色
Text().width('100%').height(50).backgroundColor(Color.Blue)
// 列表
List() {
ForEach('0123456789abcdefg'.split(''), (item:string) => {
ListItem() {
Text(item).height(50).fontSize(30)
}
})
}.layoutWeight(1).divider({strokeWidth:2,color:Color.Red})
}
}
}
}- 实现黄色、蓝色、列表上拉滚动 通过Scroll容器
scss
@Entry
@Component
struct Index {
build() {
Column() {
// 红色
Text().width('100%').height(150).backgroundColor(Color.Red)
// 核心1⭐️：多层嵌套滚动
Scroll() {
Column() {
// 黄色
Text().width('100%').height(100).backgroundColor(Color.Yellow)
// 蓝色
Text().width('100%').height(50).backgroundColor(Color.Blue)
// 列表
List() {
ForEach('0123456789abcdefg'.split(''), (item:string) => {
ListItem() {
Text(item).height(50).fontSize(30)
}
})
}.divider({strokeWidth:2,color:Color.Red})
}
}.layoutWeight(1)
}
}
}- 实现上拉黄色慢慢消失，蓝色吸顶效果
scss
@Entry
@Component
struct Index {
build() {
Column() {
// 红色
Text().width('100%').height(150).backgroundColor(Color.Red)
// 核心1⭐️：多层嵌套滚动
Scroll() {
Column() {
// 黄色
Text().width('100%').height(100).backgroundColor(Color.Yellow)
// 蓝色
Text().width('100%').height(50).backgroundColor(Color.Blue)
// 列表
List() {
ForEach('0123456789abcdefg'.split(''), (item:string) => {
ListItem() {
Text(item).height(50).fontSize(30)
}
})
}.divider({strokeWidth:2,color:Color.Red})
// 核心2⭐：上拉黄色慢慢消失、蓝色一直在 也就是减去蓝色高度
.height('calc(100% - 50vp)')
}
}.layoutWeight(1)
}
}
}- 通过nestedScroll属性实现外层滚动Scroll、内层List滚动控制
scss
@Entry
@Component
struct Index {
build() {
Column() {
// 红色
Text().width('100%').height(150).backgroundColor(Color.Red)
// 核心1⭐️：多层嵌套滚动
Scroll() {
Column() {
// 黄色
Text().width('100%').height(100).backgroundColor(Color.Yellow)
// 蓝色
Text().width('100%').height(50).backgroundColor(Color.Blue)
// 列表
List() {
ForEach('0123456789abcdefg'.split(''), (item:string) => {
ListItem() {
Text(item).height(50).fontSize(30)
}
})
}.divider({strokeWidth:2,color:Color.Red})
// 核心2⭐：上拉黄色慢慢消失、蓝色一直在 也就是减去蓝色高度
.height('calc(100% - 50vp)')
// 核心3⭐️：向前向后滚动模式 -> 实现与父组件的滚动联动
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST, // 上拉
scrollBackward: NestedScrollMode.SELF_FIRST // 下拉
// 不管父-SELF_ONLY、SELF_FIRST-到边缘管父、PARENT_FIRST-到边缘管子、PARALLEL-父子同时
// 详细 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-appendix-enums-V13#nestedscrollmode10
})
}
}.layoutWeight(1)
}
}
}完整代码：
scss
@Entry
@Component
struct Index {
build() {
Column() {
// 红色
Text().width('100%').height(150).backgroundColor(Color.Red)
// 核心1⭐️：多层嵌套滚动
Scroll() {
Column() {
// 黄色
Text().width('100%').height(100).backgroundColor(Color.Yellow)
// 蓝色
Text().width('100%').height(50).backgroundColor(Color.Blue)
// 列表
List() {
ForEach('0123456789abcdefg'.split(''), (item:string) => {
ListItem() {
Text(item).height(50).fontSize(30)
}
})
}.divider({strokeWidth:2,color:Color.Red})
// 核心2⭐：上拉黄色慢慢消失、蓝色一直在 也就是减去蓝色高度
.height('calc(100% - 50vp)')
// 核心3⭐️：向前向后滚动模式 -> 实现与父组件的滚动联动
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST, // 上拉
scrollBackward: NestedScrollMode.SELF_FIRST // 下拉
// 不管父-SELF_ONLY、SELF_FIRST-到边缘管父、PARENT_FIRST-到边缘管子、PARALLEL-父子同时
// 详细 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-appendix-enums-V13#nestedscrollmode10
})
}
}.layoutWeight(1)
}
}
}