鸿蒙Grid()代码

@Entry
@Component
struct test_Grid {
  scroller: Scroller = new Scroller()

  build() {
    Column() {
      Text('请选择你的关卡')
        .fontSize(20)
        .fontWeight(900)
        .padding(10);

      Grid(this.scroller) {
        ForEach(Array.from({ length: 100 }), (item: number, index: number) => {
          GridItem() {
            Text(index + 1 + '')
              .fontColor(Color.Orange);
          }
          .backgroundColor(Color.Blue)
          .width('15%')
          .height('15%')
        })
      }
      .padding(10)
      .height(500)
      .rowsGap(10)
      .columnsGap(20)
      .layoutDirection(GridDirection.Row);

      Row() {
        Button('上一页')
          .width(100)
          .onClick(() => {
            // 上一页
            this.scroller.scrollPage({ next: false });
          });

        Button('下一页')
          .width(100)
          .onClick(() => {
            // 下一页
            this.scroller.scrollPage({ next: true });
          });
      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceAround);
    }
  }
}

你可能感兴趣的:(前端,javascript,开发语言)