实现鸿蒙的双层滚动采用Scroll嵌套List组件实现双层滚动效果

        Scroll() {
          Column() {
            // 占位内容,让Scroll先滚动这个区域
            Column() {
              Text('')
                .height('50px')
            }
            .width('100%')
            .backgroundColor('rgba(0, 0, 0, 1)')

            // List内容
            List() {
              ForEach(this.messageList, (item: MessageItem) => {
                ListItem() {
                  Shape() {
                    Column() {
                      Column() {
                        Text(this.TipMessage)
                          .width('100%')
                          .textAlign(TextAlign.Start)
                          .fontWeight(500)
                          .fontSize('38px')
                          .lineHeight('44px')
                          .fontColor('rgba(255, 255, 255, 1)')
                          .margin({
                            bottom: '10px'
                          })
                        Text(item.content || item.abstract || '暂无详细信息')
                          .maxLines(2)
                          .textOverflow({
                            overflow: TextOverflow.Ellipsis
                          })
                          .fontSize('30px')
                          .lineHeight('35.16px')
                          .fontColor('rgba(255, 255, 255, 1)')
                          .textAlign(TextAlign.Start)
                          .width('100%')
                      }
                      .layoutWeight(1)
                      Row() {
                        Text(item.create_time || this.curentTime)
                          .fontWeight(300)
                          .fontSize('26px')
                          .fontColor('rgba(166, 166, 166, 1)')
                          .lineHeight('30.47px')
                          .width('100%')
                          .textAlign(TextAlign.End)
                      }
                      .height('30px')
                      .margin({ bottom: '15px', right: '10px' })
                    }
                  }
                  .margin({
                    left: '46px',
                    right: '46px',
                    bottom: "28px"
                  })
                  .borderRadius('50.56px')
                  .opacity(0.6)
                  .width('374px')
                  .height('220px')
                  .padding({
                    top: "22px",
                    left: "23px",
                    right: "12.5px"
                  })
                  .linearGradient({
                    angle: 149.58,
                    colors: this.gradientColor
                  })
                }
                .onClick(() => {
                  HMRouterMgr.push({
                    pageUrl: "NotificationDescriptionPage",
                    param: {
                      message_id: item.message_id
                    }
                  })
                })
              })

              // 加载更多提示
              if (this.hasMore) {
                ListItem() {
                  Row() {
                    if (this.isLoading) {
                      Text('加载中...')
                        .fontSize('26px')
                        .fontColor('rgba(166, 166, 166, 1)')
                    } else {
                      Text('上拉加载更多')
                        .fontSize('26px')
                        .fontColor('rgba(166, 166, 166, 1)')
                    }
                  }
                  .width('100%')
                  .justifyContent(FlexAlign.Center)
                  .padding({ top: '20px', bottom: '20px' })
                }
              } else if (this.messageList.length > 0) {
                ListItem() {
                  Row() {
                    Text('没有更多数据了')
                      .fontSize('26px')
                      .fontColor('rgba(166, 166, 166, 1)')
                  }
                  .width('100%')
                  .justifyContent(FlexAlign.Center)
                  .padding({ top: '20px', bottom: '20px' })
                }
              }
            }
            .width('100%')
            .height('100%')
            .scrollBar(BarState.Off)
            .nestedScroll({
              scrollForward: NestedScrollMode.PARENT_FIRST,
              scrollBackward: NestedScrollMode.SELF_FIRST
            })
            .onReachEnd(() => {
              // 上拉加载更多
              if (this.hasMore && !this.isLoading) {
                this.loadMessages(true)
              }
            })
          }
        }
        .width('100%')
        .height('100%')
        .scrollable(ScrollDirection.Vertical)
        .scrollBar(BarState.Off)
        .onScrollFrameBegin((offset: number, state: ScrollState) => {
          // 监听Scroll的滚动状态
          this.parentScrollOffset = offset
          // 当Scroll滚动超过50px时,开始吸顶
          if (offset >= 50) {
            this.isScrolled = true
          } else {
            this.isScrolled = false
          }
          // 返回默认的滚动处理结果
          return { offsetRemain: offset }
        })
      }

注意实现双层滚动效果,需要使用以下属性

.nestedScroll({
  scrollForward: NestedScrollMode.PARENT_FIRST,
  scrollBackward: NestedScrollMode.SELF_FIRST
})
使用此方向滚动的属性,同时还要使用onScrollFrameBegin这个方法,来监听滚动高度。
Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐