SidebarLinkage（下拉刷新、上拉加载）

import SidebarLinkage from '../../../../../SidebarLinkage/src/main/ets/components/SidebarLinkage/SidebarLinkage'

@Entry
@Component
struct IndexPage {
  @State requestSuccess: boolean = false; // is loading data.
  @State classifyList: Array<any> = [];

  aboutToAppear() {
    // loading data.
    setTimeout(() => {
      this.classifyList = [
        { "classifyId": 1, "classifyName": "音乐",
          "courseList": [{
            "classifyId": 0,
            "courseId": 1,
            "courseName": "YouTube1",
            "imageUrl": $r('app.media.youtube'),
            "price": 0
          },{
            "classifyId": 1,
            "courseId": 2,
            "courseName": "YouTube2",
            "imageUrl": $r('app.media.youtube'),
            "price": 12
          },{
            "classifyId": 1,
            "courseId": 3,
            "courseName": "YouTube3",
            "imageUrl": $r('app.media.youtube'),
            "price": 22
          },{
            "classifyId": 1,
            "courseId": 4,
            "courseName": "YouTube4",
            "imageUrl": $r('app.media.youtube'),
            "price": 43
          },{
            "classifyId": 1,
            "courseId": 5,
            "courseName": "YouTube5",
            "imageUrl": $r('app.media.youtube'),
            "price": 430
          },{
            "classifyId": 1,
            "courseId": 6,
            "courseName": "YouTube6",
            "imageUrl": $r('app.media.youtube'),
            "price": 120
          }]
        },
        { "classifyId": 2, "classifyName": "游戏",
          "courseList": [{
            "classifyId": 2,
            "courseId": 1,
            "courseName": "Twitter1",
            "imageUrl": $r('app.media.twitter'),
            "price": 797970
          },{
            "classifyId": 2,
            "courseId": 2,
            "courseName": "Twitter2",
            "imageUrl": $r('app.media.twitter'),
            "price": 98790
          },{
            "classifyId": 2,
            "courseId": 3,
            "courseName": "Twitter3",
            "imageUrl": $r('app.media.twitter'),
            "price": 7337
          },{
            "classifyId": 2,
            "courseId": 4,
            "courseName": "Twitter4",
            "imageUrl": $r('app.media.twitter'),
            "price": 33330
          },{
            "classifyId": 2,
            "courseId": 5,
            "courseName": "Twitter5",
            "imageUrl": $r('app.media.twitter'),
            "price": 7770
          },{
            "classifyId": 2,
            "courseId": 6,
            "courseName": "Twitter6",
            "imageUrl": $r('app.media.twitter'),
            "price": 30
          }]
        },
        { "classifyId": 3, "classifyName": "旅游",
          "courseList": [{
            "classifyId": 3,
            "courseId": 1,
            "courseName": "whatsapp1",
            "imageUrl": $r('app.media.whatsapp'),
            "price": 6330
          },{
            "classifyId": 3,
            "courseId": 2,
            "courseName": "whatsapp2",
            "imageUrl": $r('app.media.whatsapp'),
            "price": 730
          },{
            "classifyId": 3,
            "courseId": 3,
            "courseName": "whatsapp3",
            "imageUrl": $r('app.media.whatsapp'),
            "price": 330
          },{
            "classifyId": 3,
            "courseId": 4,
            "courseName": "whatsapp4",
            "imageUrl": $r('app.media.whatsapp'),
            "price": 730
          },{
            "classifyId": 3,
            "courseId": 5,
            "courseName": "whatsapp5",
            "imageUrl": $r('app.media.whatsapp'),
            "price": 0
          },{
            "classifyId": 3,
            "courseId": 6,
            "courseName": "whatsapp6",
            "imageUrl": $r('app.media.whatsapp'),
            "price": 0
          },{
            "classifyId": 3,
            "courseId": 7,
            "courseName": "whatsapp7",
            "imageUrl": $r('app.media.whatsapp'),
            "price": 70
          },{
            "classifyId": 3,
            "courseId": 8,
            "courseName": "whatsapp8",
            "imageUrl": $r('app.media.whatsapp'),
            "price": 60
          },{
            "classifyId": 3,
            "courseId": 9,
            "courseName": "whatsapp9",
            "imageUrl": $r('app.media.whatsapp'),
            "price": 40
          },{
            "classifyId": 3,
            "courseId": 10,
            "courseName": "whatsapp10",
            "imageUrl": $r('app.media.whatsapp'),
            "price": 20
          },{
            "classifyId": 3,
            "courseId": 11,
            "courseName": "whatsapp11",
            "imageUrl": $r('app.media.whatsapp'),
            "price": 0
          }]
        }
      ];
      this.requestSuccess = true;
    }, 2000);
  }

  @Builder CourseItemBuilder(item: any) {
    Row() {
      Image(JSON.parse(item.itemStr) !== undefined ? JSON.parse(item.itemStr)?.imageUrl : '')
        .height('100%')
        .aspectRatio(1)
      Column() {
        Text(JSON.parse(item.itemStr)?.courseName)
          .fontSize(14)
          .fontColor('#182431')
          .fontFamily('HarmonyHeiTi-Medium')
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Clip })
          .lineHeight(20)
          .width('100%')
        Text('$ 999.99')
          .fontSize(16)
          .fontColor(Color.Pink)
          .fontFamily('HarmonyHeiTi-Medium')
        Text(JSON.parse(item.itemStr)?.price === 0 ? '免费' : `$${JSON.parse(item.itemStr)?.price}`)
          .fontSize(18)
          .fontColor('#FA2A2D')
          .fontFamily('HarmonyHeiTi-Medium')
      }
      .padding(12)
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.SpaceBetween)
      .height('100%')
    }
    .clip(true)
    .borderRadius(18)
    .backgroundColor($r('app.color.start_window_background'))
    .width('100%')
    .height(96)
  }

  build() {
    Column() {
      SidebarLinkage({
        dataList: this.classifyList,
        requestSuccess: this.requestSuccess,
        CourseItem: this.CourseItemBuilder
      })
    }
  }
}