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

鸿蒙应用开发之通过ListItemGroup、nestedScroll实现商城活动可折叠分组滚动效果

news 2026/5/12 0:06:13

通过ListItemGroup、nestedScroll实现商城活动可折叠分组滚动效果

默认宣传封面

当上拉时候大导航吸顶

继续上拉小导航吸灯并且会随着拉上切换小导航

效果预览：

实现思路：

1、根据效果图颜色先实现红、蓝、列表布局

2、给最外层加上Scroll实现嵌套滚动，最初上拉红色慢慢隐藏、绿色吸灯

3、给List增加ListItemGroup分组实现小导航吸顶效果

完整代码：

@Entry
@Component
struct Index {@Builder GroupTitleBuilder(text: string) {// 列表分组的头部组件，对应联系人分组A、B等位置的组件Text(text).fontSize(20).backgroundColor('#fff1f3f5').width('100%').padding(5)}build() {// 核心1⭐️：多层嵌套滚动Scroll() {Column() {// 红色Text().width('100%').height(100).backgroundColor(Color.Red)// 蓝色Text().width('100%').height(50).backgroundColor(Color.Blue)// 列表List() {// 分组ForEach('ABCDEF'.split(''), (title:string) => {ListItemGroup({ header: this.GroupTitleBuilder(title) }) {// 每个分组下面的内容（咱们这里每个分组内容一样）ForEach('123456'.split(''), (item:string) => {ListItem() {Text(item).height(50).fontSize(30)}})// 每个分组下面的内容（咱们这里每个分组内容一样）}.divider({strokeWidth:2,color:Color.Red})})// 分组}.sticky(StickyStyle.Header)// 核心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})}}}
}

鸿蒙开发者班级

查看全文

http://www.jsqmd.com/news/135754/