@Entry
@Component
struct ListPage {
  @State message: string = 'Hello World';
  @State listData:Array<string> = []
  @State scrollIndex:number = 0
  aboutToAppear() {
    for (let index = 0; index < 10; index++) {
      this.listData.push(`第${index+1}个朋友`)
    }
    this.listData
  }
  @Builder itemEnd(index: number) {
    // 构建尾端滑出组件
    Button('删除')
      .width(120)
      .height(40)
    .onClick(() => {
      this.listData.splice(index,1)
    })
  }
  build() {
    Scroll(){
      Column() {
        Text("第一部分").width("100%").height(300).textAlign(TextAlign.Center)
          .backgroundColor(Color.Gray)
        Row(){
          Column()
            .width('10%')
            .height('50')
            .backgroundColor(Color.Green)
            .margin({ left:`${10*this.scrollIndex}%` })
            .animation({
              duration:1000
            })
        }.width('100%').height(100)
        // Text('索引+===>' + this.scrollIndex).width("100%").height(100).textAlign(TextAlign.Center)
        //   .backgroundColor(Color.Pink)
        List(){
          ForEach(this.listData,(item:string,index:number)=>{
            ListItem(){
              Text(item)
                .width("100%")
                .height(150)
                .fontColor(Color.White)
                .backgroundColor(Color.Brown)
                .textAlign(TextAlign.Center)
            }.swipeAction({
              end: {
                // index为该ListItem在List中的索引值。
                builder: () => { this.itemEnd(index) },
              }
            }) // 设置侧滑属性.
          })
        }.divider({
          strokeWidth:2,
          color:"#ccc"
        })
        .nestedScroll({
          // 父子滚动条联动设置
          scrollForward:NestedScrollMode.PARENT_FIRST,
          scrollBackward:NestedScrollMode.SELF_FIRST
        })

        .onReachStart(()=>{
          // 上拉到顶触发
          // this.listData.length = 10
        })
        .onReachEnd(()=>{
          // 下拉追加数据
          // this.listData.push(`第${this.listData.length}个朋友`)
        })
        .onScrollIndex((start: number, end: number, center: number)=>{
          this.scrollIndex = start
        })


        .height('calc(100% - 100vp)')
      }
    }
    .height('100%')
    .width('100%')

  }
}