HarmonyOS 鸿蒙Next中swiper按组翻页

开发者您好，

请问是想实现swiper上下滑动的组翻页还是横向滑动的纵向多行多列呢？

swiper上下滑动的组翻页，添加.vertical(true)属性：

// xxx.ets
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([]);

  aboutToAppear(): void {
    let list: number[] = [];
    for (let i = 1; i <= 10; i++) {
      list.push(i);
    }
    this.data = new MyDataSource(list);
  }

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string) => {
          Text(item.toString())
            .width('90%')
            .height(160)
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        }, (item: string) => item)
      }
      .displayCount(3, true) // 开启按组翻页：每页显示3个轮播项，且翻页时整组切换
      .autoPlay(true)
      .interval(4000)
      .loop(true)
      .duration(1000)
      .itemSpace(10)
      .vertical(true)
      .height('90%')
      .indicator( // 设置圆点导航点样式
        new DotIndicator()
          .itemWidth(15)
          .itemHeight(15)
          .selectedItemWidth(15)
          .selectedItemHeight(15)
          .color(Color.Gray)
          .selectedColor(Color.Blue))

      Row({ space: 12 }) {
        Button('showNext')
          .onClick(() => {
            this.swiperController.showNext();
          })
        Button('showPrevious')
          .onClick(() => {
            this.swiperController.showPrevious();
          })
      }.margin(5)
    }
    .width('100%')
  }
}

横向滑动的纵向多行多列，swiper嵌套Grid：

@Entry
@Component
struct MultiRowSwiper {
  private data: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  private itemsPerPage: number = 4; // 每页显示4个
  private swiperController: SwiperController = new SwiperController();

  // 将数据按组拆分的辅助函数
  private getPagedData() {
    let pages: number[][] = [];
    for (let i = 0; i < this.data.length; i += this.itemsPerPage) {
      pages.push(this.data.slice(i, i + this.itemsPerPage));
    }
    return pages;
  }

  build() {
    Column() {
      Swiper(this.swiperController) {
        ForEach(this.getPagedData(), (pageItems: number[]) => {
          // 每一页都是一个 Grid 网格
          Grid() {
            ForEach(pageItems, (item: number) => {
              GridItem() {
                Text(item.toString())
                  .fontColor(Color.White)
                  .backgroundColor(0x007DFF)
                  .width('100%')
                  .height(20)
                  .textAlign(TextAlign.Center)
                  .borderRadius(10)
              }
            })
          }
          .columnsTemplate('1fr') // 1列（1fr） 2列（1fr 1fr）
          .rowsTemplate('1fr 1fr 1fr 1fr') // 4行
          .columnsGap(10)
          .rowsGap(10)
          .padding(10)
          .height(220) // 根据内容计算高度
        })
      }
      .loop(false)
      .indicator(true)
      .curve(Curve.LinearOutSlowIn)

      Row({ space: 12 }) {
        Button('showNext')
          .onClick(() => {
            this.swiperController.showNext();
          })
        Button('showPrevious')
          .onClick(() => {
            this.swiperController.showPrevious();
          })
      }
    }
    .width('100%')
    .margin({ top: 20 })
  }
}