HarmonyOS 一屏多页，即使是2页也可以滑动

可参考DEMO：

class MyDataSource implements IDataSource {
  private list: string[] = []
  constructor(list: string[]) {
    this.list = list
  }
  totalCount(): number {
    return this.list.length
  }
  getData(index: number): string {
    return this.list[index]
  }
  registerDataChangeListener(listener: DataChangeListener): void {
  }
  unregisterDataChangeListener() {
  }
}

const MAX_SCALE = 1 // 最大缩放
const MIN_SCALE = 0.85 // 最小缩放
// 可通过以下两个参数变化观察效果，然后优化
const PAGE_DURATION = 200 // 子控件动画时长
const SWIPER_DURATION = 300 // swiper组件切换动画时长
// 拖动时用来计算缩放，影响拖动缩放速度，可根据屏幕尺寸来定
const DRAGGING_MAX_DISTANCE = 1000

@Entry
@Component
struct SwiperExample {
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])
  @State currentIndex: number = 0
  @State scaleArray: number[] = [];
  startSwiperOffset: number = 0

  aboutToAppear(): void {
    let list: string[] = []
    for (let i = 0; i <= 5; i++) {
      list.push(i.toString());
      this.scaleArray.push(i == 0 ? MAX_SCALE : MIN_SCALE)
    }
    this.data = new MyDataSource(list)
  }build() {
  Column({ space: 25 }) {
    Swiper(this.swiperController) {
      LazyForEach(this.data, (item: string, index: number) => {
        Column() {
          Text(item)
            .width(40)
            .height(40)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        }
        .width("100%")
        .height('100%')
        .backgroundColor(0xFFFF00)
        .scale({ x: this.scaleArray[index], y: this.scaleArray[index] })
        .animation({
          duration:PAGE_DURATION,
          curve:Curve.Linear
        })
      }, (item: string, index: number) => item)
    }
    .displayMode(SwiperDisplayMode.STRETCH)
    .displayCount(1)
    .width('100%')
    .height('100%')
    .index(this.currentIndex) //状态变量
    .cachedCount(2)
    .indicator(true)
    .autoPlay(true)
    .loop(true)
    .duration(SWIPER_DURATION)
    .itemSpace(0)
    .nextMargin(100)
    .prevMargin(100)
    .curve(Curve.Linear)
    .backgroundColor(0x999999)
    .interval(1000)
    .onChange((index: number) => {
      this.currentIndex = index
      this.scaleArray[this.currentIndex] = MAX_SCALE;
      if (this.currentIndex == 0) {
        this.scaleArray[this.scaleArray.length - 1] = MIN_SCALE
      } else
        this.scaleArray[this.currentIndex -1] = MIN_SCALE
      if (this.currentIndex == this.scaleArray.length - 1) {
        this.scaleArray[0] = MIN_SCALE
      } else
        this.scaleArray[this.currentIndex + 1] = MIN_SCALE
    })
    .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {
      if (this.startSwiperOffset == 0) this.startSwiperOffset = extraInfo.currentOffset;
      let offset: number = extraInfo.currentOffset
      let currentScale: number = this.scaleArray[index]
      let nextIndex = (index == this.scaleArray.length - 1 ? 0 : index + 1)
      let preIndex = (index == 0 ? this.scaleArray.length - 1 : index - 1)
      let nextScale: number = this.scaleArray[nextIndex]
      let preScale: number = this.scaleArray[preIndex]

      // 滑动距离
      let distance = Math.abs(this.startSwiperOffset - offset)
      currentScale = MAX_SCALE - Math.min(distance / DRAGGING_MAX_DISTANCE, MAX_SCALE - MIN_SCALE)
      if(this.startSwiperOffset > offset) {
        nextScale = MIN_SCALE + Math.min(distance / DRAGGING_MAX_DISTANCE, MAX_SCALE - MIN_SCALE)
        preScale = MIN_SCALE
      } else {
        preScale = MIN_SCALE + Math.min(distance / DRAGGING_MAX_DISTANCE, MAX_SCALE - MIN_SCALE)
        nextScale = MIN_SCALE
      }
      this.scaleArray[this.currentIndex] = currentScale
      this.scaleArray[nextIndex] = nextScale
      this.scaleArray[preIndex] = preScale
    })
    .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {
      if(index == targetIndex) {
        let nextIndex = (index == this.scaleArray.length - 1 ? 0 : index + 1)
        let preIndex = (index == 0 ? this.scaleArray.length - 1 : index - 1)
        this.scaleArray[index] = MAX_SCALE
        this.scaleArray[nextIndex] = MIN_SCALE
        this.scaleArray[preIndex] = MIN_SCALE
      } else {
        let nextIndex = (targetIndex == this.scaleArray.length - 1 ? 0 : targetIndex + 1)
        let preIndex = (targetIndex == 0 ? this.scaleArray.length - 1 : targetIndex - 1)
        this.scaleArray[targetIndex] = MAX_SCALE
        this.scaleArray[nextIndex] = MIN_SCALE
        this.scaleArray[preIndex] = MIN_SCALE
      }
    })
    .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => {
      this.startSwiperOffset = 0
    })
  }
  .width('100%')
  .height(150)
  .margin({ top:150 })
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.

nextmargin/prevmargin中任意一个大于子组件测算的宽度，nextmargin和prevmargin均不显示

可参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-swiper-V5#ZH-CN_TOPIC_0000001884917770__nextmargin10