HarmonyOS 首页使用自定义组件position位置实现滚动，如果组件里还有list，嵌套滚动怎么实现？

Question

如题：HarmonyOS 首页使用自定义组件position位置实现滚动，如果组件里还有list，嵌套滚动怎么实现？

Answer 1

请参考demo:

@Entry
@Component
struct ScrollAndList {
  @State message: string = 'Hello World';
  @State y:number=-500;
  touchY:number=0;
  nums:number[]=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21]
  onTouchStopPropagation:boolean=true;

  build() {
    Column() {
      Column() {

      }
      .backgroundColor(Color.Pink)
      .width('100%')
      .height(500)
      .position({ x: 0, y: this.y })

      Column() {
        List() {
          ForEach(this.nums, (item: number) => {

            ListItem() {
              Text(item.toString())
                .height(100)
            }
          })
        }
        .edgeEffect(EdgeEffect.None)
        .onWillScroll((scrollOffset: number, scrollState: ScrollState) => {
          if(scrollOffset!=0){
            this.onTouchStopPropagation=true
          }
          if(this.y!=-500){
            return {offsetRemain:0}
          }
          return null
        })
        .onReachStart(()=>{
          this.onTouchStopPropagation=false
        })
      }
      .backgroundColor(Color.Green)
      .width('100%')
      .height('100%')
      .position({ x: 0, y: this.y + 500 })
      .onTouch((event: TouchEvent) => {
        if(this.onTouchStopPropagation&&this.y==-500){
          event.stopPropagation()
        }
      })

    }.onTouch((event: TouchEvent) => {
      switch (event.type) {
        case TouchType.Down: {
          this.touchY = event.touches[0].y;
          // console.log(`this.touchY is ${this.touchY}`)
          break;
        }
        case TouchType.Move: {
          let juli=this.y+(event.touches[0].y - this.touchY)/100
          this.y = juli>=-500?juli:-500
          // console.log(`this.y is ${this.y}`)
          break;
        }
        case TouchType.Up: {
          if (this.y > -250) {
            this.y = 0;
            break;
          }
          this.y = -500;
          break;
        }
        default: {
          break;
        }
      }
    })
    .height('100%')
    .width('100%')
  }
}