# 标题栏与底部条目无法联动

#### 问题现象

在页面结构中，存在一个标题栏和多个底部列表条目。当用户横向滑动标题栏时，底部对应的列表条目未能同步滚动。

#### 背景知识

*   当主组件滚动时，可通过ScrollController控制器动态设置组件（列表条目）的滚动位置。
*   onScrollFrameBegin该接口回调时，事件参数传入即将发生的滑动量，事件处理函数中可根据应用场景计算实际需要的滑动量并作为事件处理函数的返回值，列表将按照返回值的实际滑动量进行滑动。

#### 问题定位

*   检查滚动组件绑定：查看标题栏和列表条目的代码实现，检查是否有ScrollController。
*   验证事件传递：若使用ScrollController，则在标题栏的滚动回调函数中记录日志，检查底部条目是否滑动。

#### 分析结论

标题栏的滑动事件未能传递到底部条目可能的原因包括：

*   条目未绑定控制器：列表条目的Scroll未挂载控制器，无法接受外部滚动指令。
*   事件未同步调用：标题栏的滚动回调未遍历调用所有条目的控制器方法。

#### 修改建议

*   为每个列表条目添加控制器：为每个条目的滚动容器初始化独立的控制器，并将其存储至全局集合中。
    
    ```
    let scroller: Scroller = new Scroller()
    showData.scrollerArray!.push(scroller)
    ```
    
*   标题栏滚动时同步调用条目控制器：在标题栏的滚动监听中，遍历所有条目控制器并设置相同滚动位置。
    
    ```
    List({ scroller: this.topRightScroller}) {
      ForEach(this.topRightArr, (item: string) => {
        ListItem() {
          Text(item)
            .height(100)
            .width(RightItemWidth)
            .fontSize(16)
            .textAlign(TextAlign.Start)
            .borderRadius(0)
            .padding(10)
            .backgroundColor(0xFFFFFF)
        }
      }, (item: string) => item)
    }
    .listDirection(Axis.Horizontal) // 设置滚动方向为横向滚动
    .edgeEffect(EdgeEffect.None)
    .divider({ strokeWidth: 0.5, color: 0xeeeeee })
    .scrollBar(BarState.Off)
    .width('100%')
    .height('100%')
    .layoutWeight(1)
    .onScrollFrameBegin((offset: number, state: ScrollState) => {
      // 关键联动，通过对象保存的Scroller控制器数组遍历保持offset同步
      this.dataSource.getAllData().forEach(showData => {
        showData.scrollerArray!.forEach(scroller => {
          scroller.scrollTo({ xOffset: this.topRightScroller.currentOffset().xOffset + offset, yOffset: 0 })
        })
      })
      return { offsetRemain: offset }
    })
    ```