HarmonyOS 消息首页框架实现

class MyDataSource implements IDataSource {  
  private list: number[] = []  
  constructor(list: number[]) {  
    this.list = list  
  }  
  totalCount(): number {  
    return this.list.length  
  }  
  getData(index: number): number {  
    return this.list[index]  
  }  
  registerDataChangeListener(listener: DataChangeListener): void {  
  }  
  unregisterDataChangeListener() {  
  }  
}  
@Entry  
@Component  
struct SwiperExample {  
  private swiperController: SwiperController = new SwiperController()  
  private data: MyDataSource = new MyDataSource([])  
  @State dataList: string[] = ['内部测试', '内部测试', '内部测试', '内部测试']  
  private arr: string[] = []  
  private scrollerForList: Scroller = new Scroller()  
  aboutToAppear(): void {  
    let list: number[] = []  
    for (let i = 1; i <= 10; i++) {  
      list.push(i);  
    }  
    this.data = new MyDataSource(list)  
    for (let i = 0; i < 20; i++) {  
      this.arr.push('内部测试' + i)  
    }  
  }  
  @State currentMenu: string = "测试0"  
  @State select: boolean = true  
  @State handlePopup: boolean = false  
  private controller: TabsController = new TabsController()  
  @Builder  
  textBuilder(content: string) {  
    Text(content)  
      .onClick(() => {  
        this.handlePopup = !this.handlePopup  
      })  
  }  
  @Builder  
  customDialogBuilder() {  
    Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {  
      ForEach(this.arr, (item: string,index:number) => {  
        Text(item + index).height(40).onClick(() => {  
          this.currentMenu = item  
        }).width(80)  
      })  
    }  
    .width('100%')  
    .backgroundColor(0x80ffffff)  
  }  
  @Builder  
  CartItem() {  
    Row() {  
      Text(this.currentMenu)  
        .layoutWeight(1)  
      Image($r('app.media.startIcon'))  
        .width(60)  
        .height(60)  
    }  
    .height(70)  
    .backgroundColor(0x80ffffff)  
  }  
  build() {  
      Column({ space: 5 }) {  
        Column() {  
          Swiper(this.swiperController) {  
            LazyForEach(this.data, (item: string) => {  
              Row() {  
                Image($r('app.media.app_icon')).width(40).height(40)  
                Text(item.toString())  
                  .width("65%")  
                  .height(40)  
                  .backgroundColor(0xAFEEEE)  
                  .textAlign(TextAlign.Center)  
                  .fontSize(30)  
                Button('去看看').width(80).height(56)  
              }.backgroundColor(Color.Pink)  
            }, (item: string) => item)  
          }  
          .vertical(true)  
          .cachedCount(2)  
          .indicator(false)  
          .autoPlay(true)  
          .interval(4000)  
          .loop(true)  
          .width('100%')  
          .duration(1000)  
          .itemSpace(0)  
          .curve(Curve.Linear)  
        }.width('100%')  
        Scroll() {  
          Column() {  
            Row() {  
              Flex({ justifyContent: FlexAlign.SpaceAround }) {  
                ForEach(this.dataList, (item: string) => {  
                  Column() {  
                    Image($r('app.media.app_icon')).width(80).height(80)  
                    Text(item).fontSize(18)  
                  }  
                })  
              }  
            }.margin({ top: 20 })  
            Row() {  
              Stack() {  
                Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {  
                  ForEach(this.arr, (item: string, index: number) => {  
                    TabContent() {  
                      List({ space: 10.5 }) {  
                        ForEach(this.arr, (item: string, index?: number): void => {  
                          ListItem() {  
                            this.CartItem()  
                          }  
                        })  
                      }  
                      .scrollBar(BarState.Off)  
                      .nestedScroll({  
                        scrollForward: NestedScrollMode.PARENT_FIRST,  
                        scrollBackward: NestedScrollMode.SELF_FIRST  
                      })  
                    }.tabBar(item)  
                  })  
                }  
                .vertical(false)  
                .scrollable(true)  
                .barMode(BarMode.Scrollable)  
                .barHeight(80)  
                .animationDuration(400)  
                .onChange((index: number) => {  
                  console.info(index.toString())  
                })  
                Image($r('app.media.app_icon'))  
                  .width('10%')  
                  .bindPopup(this.handlePopup, {  
                    builder: this.customDialogBuilder,  
                    enableArrow: false,  
                    radius: 0,  
                    mask: false,  
                    onStateChange: (e) => {  
                      if (!e.isVisible) {  
                        this.handlePopup = false  
                      }  
                    }  
                  })  
                  .onClick(() => {  
                    this.handlePopup = !this.handlePopup  
                    console.log('' + this.handlePopup)  
                  })  
                  .margin({ bottom: 690, left: 320 })  
              }  
            }  
            .width('100%')  
          }  
        }  
        .scrollBar(BarState.Off)  
      }  
      .width('100%')  
      .margin({ top: 5 })  
  }  
}