【代码案例】HarmonyOS NEXT 视频卡片和列表区域的联动滚动

  // 当前播放的新闻
  @State currentPlayNews: NewsItem = new NewsItem('', '');
  // 当前播放的新闻在列表中的下标
  @State currentIndex: number = 0;
  
  aboutToAppear() {
    // 新闻列表数据初始化
    NEWS_LIST_DATA.forEach((news: NewsItem) => {
      this.newsList.pushData(news);
    })
    this.currentPlayNews = this.newsList.getData(this.currentIndex);
    ...
  }

  List({ scroller: this.scroller }) {
    ...
  }
  .nestedScroll({
    scrollForward: NestedScrollMode.PARENT_FIRST, // 可滚动组件往末尾端滚动时的嵌套滚动选项,父组件先滚动，父组件滚动到边缘以后自身滚动。
    scrollBackward: NestedScrollMode.SELF_FIRST // 可滚动组件往起始端滚动时的嵌套滚动选项,自身先滚动，自身滚动到边缘以后父组件滚动。
  })

  async computeScrollHeight() {
    // 获取屏幕宽度
    let displayHeight: number = px2vp(display.getDefaultDisplaySync().height);
    // 获取应用窗口
    let appWindow: window.Window = await window.getLastWindow(getContext());
    // 获取系统默认区域，一般包含状态栏、导航栏
    let systemDefaultArea: window.AvoidArea = appWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
    // 获取导航条区域
    let navigationIndicatorArea: window.AvoidArea =
    appWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
    // 获取系统默认区域高度
    let systemDefaultHeight: number = px2vp(systemDefaultArea.topRect.height + systemDefaultArea.bottomRect.height);
    // 获取系统默认区域高度
    let navigationIndicatorHeight: number = px2vp(navigationIndicatorArea.bottomRect.height);
    // tabs高度
    let tabsHeight: number = displayHeight - systemDefaultHeight - navigationIndicatorHeight - Constants.NAVDESTINATION_PADDING_BOTTOM;
    this.scrollHeight = tabsHeight - Constants.TITLE_HEIGHT - Constants.TAB_BAR_HEIGHT - Constants.STROKE_WIDTH;
  }

  // 新闻标题高度
  const newsNameHeight = newValue.height as number;
  // 计算视频卡片上下外边距的和
  const videoCardVerticalMargin = Constants.VIDEO_CARD_MARGIN_TOP + Constants.VIDEO_CARD_MARGIN_BOTTOM;
  // 隐藏视频后视频卡片的高度
  const videoCardHeight = newsNameHeight + Constants.VIDEO_CONTROL_HEIGHT;

  /**
   * 计算新闻列表高度, 计算方式: 滚动容器高度 - 隐藏视频后视频卡片的高度 - 视频卡片上下外边距
   * 此时外层Scroll滚动到尾部边缘时，视频刚好隐藏，新闻列表List完全显示，继续向上滑动新闻列表自身开始滚动
   */
  this.newsListHeight = this.scrollHeight - videoCardHeight - videoCardVerticalMargin;

  // 新闻标题
  Text(this.currentPlayNews.newsName)
    .width($r('app.string.video_linkage_list_full_size'))
    .fontSize($r('app.string.ohos_id_text_size_headline'))
    .fontWeight(FontWeight.Bolder)
    .padding($r('app.integer.video_linkage_list_news_name_padding'))
    // TODO: 性能知识点：onAreaChange属于频繁回调接口，应该避免在内部进行冗余和耗时操作，例如避免打印日志
    .onAreaChange((oldValue: Area, newValue: Area) => {
      // 切换新闻后获取新闻标题高度，如果标题高度发生变化后，重新计算新闻列表高度
      if (oldValue.height !== newValue.height) {
        // 新闻标题高度
        const newsNameHeight = newValue.height as number;
        // 计算视频卡片上下外边距的和
        const videoCardVerticalMargin = Constants.VIDEO_CARD_MARGIN_TOP + Constants.VIDEO_CARD_MARGIN_BOTTOM;
        // 隐藏视频后视频卡片的高度
        const videoCardHeight = newsNameHeight + Constants.VIDEO_CONTROL_HEIGHT;
        /**
         * 计算新闻列表高度, 计算方式: 滚动容器高度 - 隐藏视频后视频卡片的高度 - 视频卡片上下外边距
         * 此时外层Scroll滚动到尾部边缘时，视频刚好隐藏，新闻列表List完全显示，继续向上滑动新闻列表自身开始滚动
         */
        this.newsListHeight = this.scrollHeight - videoCardHeight - videoCardVerticalMargin;
      }
    })

  // 是否隐藏视频区域
  @State @Watch('onIsHideVideoChange') isHideVideo: boolean = false;
  
  Scroll(this.scroller) {
    ...
  }
  // TODO: 性能知识点：onScroll属于频繁回调接口，应该避免在内部进行冗余和耗时操作，例如避免打印日志
  .onScroll((xOffset: number, yOffset: number) => {
    // 视频已隐藏情况下, Scroll向下滚动时显示视频
    if (yOffset < 0 && this.isHideVideo) {
      this.isHideVideo = false;
    }
  })
  .onReachEnd(() => {
    // Scroll滚动到末尾时隐藏视频
    this.isHideVideo = true;
  })
  
  Stack({ alignContent: Alignment.Bottom }) {
    ...
  }
  .width($r('app.string.video_linkage_list_full_size'))
   // 修改视频的高度实现显隐控制
  .height(this.isHideVideo ? 0 : Constants.VIDEO_HEIGHT)
  

  // TODO：知识点：根据视频显隐状态修改边距，使用边距代替video占位，使Scroll容器内容高度不变，可以向下滚动显示视频，并且避免滚动混乱
  onIsHideVideoChange() {
    if (!this.isHideVideo) {
      // 视频显示，视频卡片上边距减去视频高度
      this.videoMarginTop -= Constants.VIDEO_HEIGHT;
    } else {
      // 视频隐藏，视频卡片上边距加上视频高度
      this.videoMarginTop += Constants.VIDEO_HEIGHT;
    }
  }

  // 上一条
  Image($r('app.media.video_linkage_list_play_previous'))
    .height($r('app.integer.video_linkage_list_control_previous_next_height'))
    .onClick(() => {
      // 如果不是第一条，切换至上一条
      if (this.currentIndex > 0) {
        this.currentIndex--;
        this.currentPlayNews = this.newsList.getData(this.currentIndex);
      } else {
        promptAction.showToast({
          message: $r('app.string.video_linkage_list_first_data_toast')
        });
      }
    })
  ...
  // 下一条
  Image($r('app.media.video_linkage_list_play_next'))
    .height($r('app.integer.video_linkage_list_control_previous_next_height'))
    .onClick(() => {
      // 如果不是最后一条，切换至下一条
      if (this.currentIndex < this.newsList.totalCount() - 1) {
        this.currentIndex++;
        this.currentPlayNews = this.newsList.getData(this.currentIndex);
      } else {
        promptAction.showToast({
          message: $r('app.string.video_linkage_list_last_data_toast')
        });
      }
    })

  // TODO：知识点：监听currentIndex的变化，视频播放卡片切换新闻和点击列表项切换新闻时修改currentIndex,根据下标计算列表的滚动偏移
  onCurrentIndexChange() {
    // 选中的列表项下标大于3时，列表向上滚动，滚动到与列表显示区域内上方间隔3个列表项或列表尾部时停止。
    if (this.currentIndex > Constants.NEWS_LIST_SCROLL_TO_INDEX) {
      this.scroller.scrollTo({
        yOffset: Constants.NEWS_LIST_ITEM_HEIGHT * (this.currentIndex - Constants.NEWS_LIST_SCROLL_TO_INDEX),
        xOffset: 0
      });
    } else {
      // 选中的列表项下标小于等于3时，列表滚动至头部
      this.scroller.scrollTo({ yOffset: 0, xOffset: 0 });
    }
  }

videolinkagelist                              // har类型
|---/src/main/ets/model                        
|   |---NewsListDataSource.ets                // 数据模型层-列表数据模型 
|   |---NewsItemModel.ets                     // 数据模型层-列表项数据模型
|---/src/main/ets/pages                        
|   |---VideoLinkageList.ets                  // 视图层-主页面
|---/src/main/ets/mock                        
|   |---NewsListData.ets                      // 新闻列表mock数据
|---/src/main/ets/common                        
|   |---Constants.ets                         // 常量数据