HarmonyOS鸿蒙Next中Scroll+Tab+List嵌套滑动，tab吸顶时拖拽Tab Scroll组件发生滑动

HarmonyOS鸿蒙Next中Scroll+Tab+List嵌套滑动，tab吸顶时拖拽Tab Scroll组件发生滑动 当TabBar吸顶且List组件上滑一段距离后，手指向下拖拽TabBar位置，如何实现以下效果：

Scroll组件不进行下滑而是由List组件下滑，当List组件下滑到顶部时再由Scroll组件响应拖拽事件继续下滑。

相关代码：

@Entry
@Component
struct StickyNestedScroll {
  @State arr: number[] = [];

  @Styles
  listCard() {
    .backgroundColor(Color.White)
    .height(72)
    .width("100%")
    .borderRadius(12)
  }

  build() {
    Scroll() {
      Column() {
        Text("Scroll Area")
          .width("100%")
          .height("40%")
          .backgroundColor('#0080DC')
          .textAlign(TextAlign.Center)
        Tabs({ barPosition: BarPosition.Start }) {
          TabContent() {
            List({ space: 10 }) {
              ForEach(this.arr, (item: number) => {
                ListItem() {
                  Text("item" + item)
                    .fontSize(16)
                    .height(50)
                }.listCard()
              }, (item: string) => item)
            }.width("100%")
            .edgeEffect(EdgeEffect.Spring)
            .nestedScroll({
              scrollForward: NestedScrollMode.PARENT_FIRST,
              scrollBackward: NestedScrollMode.SELF_FIRST
            })
          }.tabBar("Tab1")

          TabContent() {
          }.tabBar("Tab2")
        }
        .vertical(false)
        .height("100%")
        .padding({
          top: 50
        })
      }.width("100%")
    }
    .edgeEffect(EdgeEffect.Spring)
    .friction(0.6)
    .backgroundColor('#DCDCDC')
    .scrollBar(BarState.Off)
    .width('100%')
    .height('100%')
  }

  aboutToAppear() {
    for (let i = 0; i < 30; i++) {
      this.arr.push(i);
    }
  }
}

更多关于HarmonyOS鸿蒙Next中Scroll+Tab+List嵌套滑动，tab吸顶时拖拽Tab Scroll组件发生滑动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，当Scroll、Tab和List组件嵌套滑动时，Tab吸顶后拖拽Tab Scroll组件可能导致滑动冲突。这是由于多个滑动组件在同一层级嵌套，事件分发机制未正确处理。可通过自定义事件分发逻辑，确保在Tab吸顶时，Tab Scroll组件能正确响应拖拽事件，避免与List组件的滑动冲突。

更多关于HarmonyOS鸿蒙Next中Scroll+Tab+List嵌套滑动，tab吸顶时拖拽Tab Scroll组件发生滑动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


要实现Scroll+Tab+List嵌套滑动时Tab吸顶后的联动效果，可以通过以下方式优化：

  1. 关键点在于正确配置nestedScroll参数：
.nestedScroll({
  scrollForward: NestedScrollMode.PARENT_FIRST, 
  scrollBackward: NestedScrollMode.SELF_FIRST
})
  1. 需要为List组件添加scrollable属性：
List({ space: 10 }) {
  //...
}.scrollable(ScrollDirection.Vertical)
  1. 建议给Tabs组件添加onTouch事件处理：
Tabs({ barPosition: BarPosition.Start })
  .onTouch((event: TouchEvent) => {
    if (event.type === TouchType.Down) {
      // 记录触摸起始位置
    }
    if (event.type === TouchType.Move) {
      // 根据位移判断滑动方向
    }
  })
  1. 可以结合ScrollController来控制滚动行为：
@State scrollController: ScrollController = new ScrollController()

Scroll(this.scrollController) {
  //...
}

这种嵌套滑动场景需要精确控制各组件的事件分发顺序，建议通过实际的触摸位置和滚动位置来判断应该由哪个组件响应滑动事件。当Tab吸顶且List不在顶部时，优先将事件分发给List组件；当List到达顶部后，再将事件传递给父Scroll组件。

回到顶部