当前位置：首页 > news >正文

鸿蒙应用开发之通过Scroll、nestedScroll实现京东秒杀嵌套滚动效果

news 2026/6/11 19:54:35

通过Scroll、nestedScroll实现京东秒杀嵌套滚动效果

当上拉时，外层先滚动慢慢的黄色签到图片会消失、然后List列表可以继续上拉

效果预览：

实现思路：

实现页面结构布局，红、黄、绿、列表

@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容器

@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)}}
}

实现上拉黄色慢慢消失，蓝色吸顶效果

@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滚动控制

@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)}}
}

完整代码：

@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)}}
}

鸿蒙开发者班级

查看全文

http://www.gsyq.cn/news/149094.html