如何动态设置Swiper组件的nextMargin属性
===========================

#### 问题现象

如何在Swiper组件运行时调整其nextMargin属性以此来控制Swiper页面的后边距？

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/64/v3/T-WXXPKaSpKIm4W2SORc_Q/zh-cn_image_0000002658918983.gif?HW-CC-KV=V1&HW-CC-Date=20260709T133924Z&HW-CC-Expire=86400&HW-CC-Sign=7EF436F12CDA7A5CEE68A5A39FC3321E81DD469FAB96516A51104A027B9745B1 "点击放大")

#### 背景知识

*   [nextMargin](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-swiper#nextmargin10)：设置后边距，用于露出后一项的一小部分。
*   [onAnimationStart](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-swiper#onanimationstart9)：切换动画开始时触发该回调。
*   [animateTo](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-uicontext-uicontext#animateto)：接口来指定由于闭包代码导致的状态变化插入过渡动效。
*   [duration](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-swiper#duration)：设置子组件切换的动画时长。

#### 解决方案

实现思路如下：

1.  为了使动画过渡柔和，在切换动画开始时，可以在onAnimationStart回调中结合animateTo方法来更新当前轮播页的索引。
2.  设置nextMargin属性来控制后边距，从而展示下一项的部分内容。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2f/v3/cwIg0L8lQnulhCFF6iosjQ/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T133924Z&HW-CC-Expire=86400&HW-CC-Sign=31C9E8A2A3FDFB5F8B1CA61CFBAFC2169DB34A610BADA6ACBCB9C768351BED38)

防止出现闪动，animateTo中参数duration数值需要保持和Swiper组件属性duration数值保持一致。

@Entry
@Component
struct SwiperDemo {
  private swiperController: SwiperController \= new SwiperController();
  private data: string\[\] \= \['0', '1', '2', '3', '4', '5', '6'\];
  @State currentIndex: number \= 0; _// 当前页面_

  build() {
    Column({ space: 25 }) {
      Swiper(this.swiperController) {
        ForEach(this.data, (item: string) \=\> {
          Column() {
            Text(item).width(40).height(40).textAlign(TextAlign.Center).fontSize(30);
          }
          .width('100%')
          .height('100%')
          .border({ width: 3, color: '#ff24d8e5' });
        });
      }
      .displayMode(SwiperDisplayMode.STRETCH)
      .displayCount(1) _//_ _设置Swiper视窗内元素显示个数_
      .loop(false)
      .index(this.currentIndex)
      .cachedCount(2)
      .indicator(true)
      .duration(500) _//_ _设置子组件切换的动画时长_
      .nextMargin(this.currentIndex <\= 2 ? 50 : 0) _// nextMargin属性来控制后边距_
      .curve(Curve.Linear)
      .backgroundColor('#ffbbfce2')
      .onAnimationStart((targetIndex: number) \=\> {
        _//_ _在onAnimationStart回调中结合animateTo方法来更新当前轮播页的索引_
        this.getUIContext()?.animateTo
        ({
          duration: 500,
          curve: Curve.Linear,
          playMode: PlayMode.Normal,
        }, () \=\> {
          this.currentIndex \= targetIndex;
        });
      });
    }.width('100%').height('20%').margin({ top: 5 });
  }
}

#### 常见FAQ

Q：在onChange回调中修改当前页索引，然后通过nextMargin动态设置后边距，为什么会出现闪动？

A：因为onChange回调在动画执行结束时触发，因此会出现闪动。建议在onAnimationStart回调中修改当前页索引，然后通过nextMargin动态设置后边距。