OpenHarmony开发教程指南—如何实现视频卡片和列表区域的联动滚动场景。

介绍

本示例使用Scroll和List组件嵌套，通过List组件的滚动控制器和nestedScroll属性实现了视频卡片和列表区域的联动滚动场景。

效果图预览

使用说明

1. 向上滑动列表，页面向上滚动到末尾后隐藏视频，继续向上滑动，卡片吸顶，列表开始滚动，列表滚动到底触发回弹效果。
2. 向下滑动列表，列表先滚动到头部后，页面向下滚动，视频显示，继续向下滑动到页面头部，页面上方触发回弹效果。
3. 点击视频卡片中的播放按钮切换视频播放状态。
4. 视频卡片点击上一条、下一条时，通过List的滚动控制器控制列表滚动到指定位置，视频卡片不发生滚动。
5. 点击列表项，列表发生滚动，视频卡片不滚动。

1.初始化新闻列表数据 NEWS_LIST_DATA，通过状态变量currentPlayNews和currentIndex跟踪当前播放的新闻。

  // 当前播放的新闻
  @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);
    ...
  }

2.为了解决新闻列表与外层Scroll容器嵌套时的滚动冲突问题，给新闻列表List设置 nestedScroll 属性，指定列表向末尾端和起始端滚动时与外层Scroll的嵌套滚动方式。

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

3.为了实现视频卡片的吸顶效果，需要根据 Scroll 容器高度和隐藏视频后视频卡片的高度计算新闻列表的高度，使 Scroll 滚动到尾部边缘时，视频隐藏，视频卡片吸顶，新闻列表 List 完全显示。

• 计算Scroll容器高度

  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_NAVIGAT