HarmonyOS 鸿蒙Next中Scorll嵌套Column遇到滑动问题

HarmonyOS 鸿蒙Next中Scorll嵌套Column遇到滑动问题

Scroll() {
  Column() {
    ItemCommentLayout({
      nickname: this.data[0].user.nickname,
      headImg: this.data[0].user.avatar.url,
      dateText: this.data[0].created_at_str,
      likeCount: this.data[0].likes_count,
      isLike: this.data[0].is_like,
      desc: this.data[0].desc,
      isAuthor: true,
      isTop: true
    });

    List() {
      ForEach(this.comments, (item: CommentBean, index: number) => {
        ListItem() {
          ItemCommentLayout({
            nickname: item.user?.nickname,
            headImg: item.user?.avatar.x200,
            dateText: item.created_at_str,
            likeCount: item.comment_likes_count,
            isLike: item.is_like,
            desc: item.desc,
            isAuthor: this.data[0].user.uuid === item.user?.uuid ? true : false,
            isTop: false
          });
        }
        .onAppear(() => {
         
          if (index == this.comments.length - 1) {
            if (StrUtil.isNotBlank(this.nextPageLink)) {
              this.loadMoreData() 
            }
          }
        })
      }
        , (item: CommentBean) => JSON.stringify(item));
    }
    .scrollBar(BarState.Off)
    .width('100%')
    .height('calc(100% - 78vp)')
    .nestedScroll({
      scrollForward: NestedScrollMode.PARENT_FIRST, // 向前滚动时父容器优先
      scrollBackward: NestedScrollMode.PARENT_FIRST // 向后滚动时父容器优先
    });
  }
  .width('100%')
}
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Off)
.layoutWeight(1)
.width('100%');

如上代码，希望Scroll 内的column 整体滚动，目前是List 上面的 ItemCommentLayout会固定在顶部，不会随着list 一起滚动，该如何修改呢？请各位老师赐教；


更多关于HarmonyOS 鸿蒙Next中Scorll嵌套Column遇到滑动问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

把.height(‘calc(100% - 78vp)’)去掉就可以了，由于您这边给List组件一个高度，滚动的时候就会按照这个高度去滚动，您这边把List设置的高度去掉就可以整体进行滚动了。

更多关于HarmonyOS 鸿蒙Next中Scorll嵌套Column遇到滑动问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


第一个地方
.nestedScroll({
  // 表示在向前滚动（内容向下滚动/手指向上滑动）时，父容器优先处理滚动事件
  scrollForward: NestedScrollMode.PARENT_FIRST,
  // 表示在向后滚动内容向上滚动/手指向下滑动）时，子容器优先处理滚动事件
  scrollBackward: NestedScrollMode.SELF_FIRST
})

第二个地方

    .layoutWeight(1) // 设置给list组件

因为Scroll的子组件不能设置.layoutWeight(1)， column的高度要长于Scroll才能实现父容器的滚动

子容器List的滚动逻辑不同于Scroll，需要固定高度，List容器设置.layoutWeight(1)可以实现子容器的滚动

在HarmonyOS Next中，Scroll嵌套Column滑动问题通常是由于布局高度或滚动方向冲突导致。检查Column是否设置了固定高度，这可能会限制Scroll的滚动范围。确保Scroll的滚动方向与Column的布局方向一致，避免嵌套滚动冲突。使用Flex布局或调整组件属性，如scrollable、scrollBar等，以优化滑动体验。

在 HarmonyOS Next 中，Scroll 嵌套 Column 再包含 List 时，出现 List 上方组件不随 List 滚动的问题，核心原因在于 List 组件默认启用了自身的滚动机制，并与父 Scroll 发生了嵌套滚动冲突。

根据你提供的代码，问题出在 List 设置了 .height('calc(100% - 78vp)') 并配置了 .nestedScroll。这导致 List 成为一个具有固定高度、独立滚动区域的子滚动容器。其内部的 ListItem 可以滚动，但外部的父 Scroll 无法控制 List 本身及其上方组件（第一个 ItemCommentLayout）的滚动。

解决方案是：移除 List 的独立滚动特性，让父 Scroll 接管所有内容的统一滚动。

修改你的代码如下：

Scroll() {
  Column() {
    // 第一个 ItemCommentLayout
    ItemCommentLayout({
      nickname: this.data[0].user.nickname,
      headImg: this.data[0].user.avatar.url,
      dateText: this.data[0].created_at_str,
      likeCount: this.data[0].likes_count,
      isLike: this.data[0].is_like,
      desc: this.data[0].desc,
      isAuthor: true,
      isTop: true
    });

    // List部分：移除高度和嵌套滚动配置
    List() {
      ForEach(this.comments, (item: CommentBean, index: number) => {
        ListItem() {
          ItemCommentLayout({
            nickname: item.user?.nickname,
            headImg: item.user?.avatar.x200,
            dateText: item.created_at_str,
            likeCount: item.comment_likes_count,
            isLike: item.is_like,
            desc: item.desc,
            isAuthor: this.data[0].user.uuid === item.user?.uuid ? true : false,
            isTop: false
          });
        }
        .onAppear(() => {
          if (index == this.comments.length - 1) {
            if (StrUtil.isNotBlank(this.nextPageLink)) {
              this.loadMoreData()
            }
          }
        })
      }, (item: CommentBean) => JSON.stringify(item));
    }
    // 关键修改：删除 .height() 和 .nestedScroll() 设置
    .scrollBar(BarState.Off)
    .width('100%')
    // .height('calc(100% - 78vp)')  // 删除此行
    // .nestedScroll({ ... })        // 删除此行
  }
  .width('100%')
}
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Off)
.layoutWeight(1)
.width('100%');

修改说明：

  1. 删除 List 的 .height('calc(100% - 78vp)') 设置：List 不再具有一个固定的、受限的高度，其高度将由内容（所有 ListItem）自然撑开，成为 Column 中的一个普通子组件。
  2. 删除 List 的 .nestedScroll({ ... }) 配置：List 本身不再是一个可滚动的容器，因此不需要与父 Scroll 协商嵌套滚动行为。所有滚动事件将由最外层的 Scroll 统一处理。

原理： 经过以上修改，Column 下的所有直接子组件（第一个 ItemCommentLayout 和 List）都将按顺序排列。最外层的 Scroll 会计算 Column 的总高度，当总高度超出 Scroll 的视口时，即可进行整体垂直滚动。List 内部的 ListItem 将作为普通内容展开，不会触发独立的滚动。

这样，第一个 ItemCommentLayout 就会和 List 以及 List 内的评论项一起，作为整个可滚动内容的一部分进行滚动了。

回到顶部