Scroll内Web嵌套其他组件时滑动优先级设置
========================

#### 问题现象

Scroll内Web组件头尾存在其他组件时，头部组件只有在Web内容滑动至顶部时才显示，尾部组件只有在Web内容滑动至底部时才显示。

#### 背景知识

*   [onVisibleAreaChange](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-component-visible-area-change-event#onvisibleareachange)：组件可见区域变化时触发该回调。
*   [nestedScroll](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scrollable-common#nestedscroll11)设置前后两个方向的嵌套滚动模式，实现与父组件的滚动联动。

#### 解决方案

通过给头尾组件设置onVisibleAreaChange可见区域变化回调：当头部组件或尾部组件可见时，设置Web的滑动优先级为父组件先滚动；当头部组件或尾部组件不可见时，设置Web的滑动优先级为自身先滚动。

import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct ScrollerDemo {
  scroller: Scroller \= new Scroller();
  controller: webview.WebviewController \= new webview.WebviewController();
  @State scrollMode: NestedScrollMode \= NestedScrollMode.PARENT\_FIRST;

  build() {
    Scroll(this.scroller) {
      Column() {
        Column() {
          Text('标题')
            .fontSize(16)
            .fontWeight(600)
            .lineHeight(23)
            .textAlign(TextAlign.Start)
            .width('90%')
        }
        .width('100%').alignItems(HorizontalAlign.Start).margin({ top: 20, bottom: 24 })
     _   // 判断可见区域变化_
        .onVisibleAreaChange(\[0.0, 1.0\], (isExpanding: boolean, currentRatio: number) \=\> {
          if (isExpanding && currentRatio \> 0.0) {
          _  // 可见时，设置Web的滑动优先级为父组件先滚动_
            this.scrollMode \= NestedScrollMode.PARENT\_FIRST;
          }

          if (!isExpanding && currentRatio <\= 0.0) {
           _ // 不可见时，设置Web的滑动优先级为自身先滚动_
            this.scrollMode \= NestedScrollMode.SELF\_FIRST;
          }
        })

        Web({
      _    // 此处'www.example.com'仅作示例。_
          src: 'www.example.com',
          controller: this.controller
        })
          .fileAccess(false)
          .geolocationAccess(false)
          .domStorageAccess(true)
          .javaScriptAccess(true)
          .zoomAccess(false)
          .height('100%')
          .nestedScroll({
            scrollForward: this.scrollMode,
            scrollBackward: this.scrollMode
          })

        Row() {
          Text(\`阅读量：  12345\`).textAlign(TextAlign.End)
        }.height(40).alignItems(VerticalAlign.Center)
        _// 判断可见区域变化_
        .onVisibleAreaChange(\[0.0, 1.0\], (isExpanding: boolean, currentRatio: number) \=\> {
          if (isExpanding && currentRatio \> 0.0) {
       _     // 可见时，设置Web的滑动优先级为父组件先滚动_
            this.scrollMode \= NestedScrollMode.PARENT\_FIRST;
          }

          if (!isExpanding && currentRatio <\= 0.0) {
         _   // 不可见时，设置Web的滑动优先级为自身先滚动_
            this.scrollMode \= NestedScrollMode.SELF\_FIRST;
          }
        })
      }
    }
    .width('100%')
    .layoutWeight(1)
    .padding({
      left: 14,
      right: 14
    })
    .scrollBar(BarState.Off)
  }
}