进入页面后，页面自动滑动
============

#### 问题现象

应用跳转到新的页面时，页面开始移动（页面没受到触碰）。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/77/v3/i44HPNlfTmuz6piHyr_pxw/zh-cn_image_0000002628551062.png?HW-CC-KV=V1&HW-CC-Date=20260709T134017Z&HW-CC-Expire=86400&HW-CC-Sign=B8DD50FC0796300CDB102999BD140B04E7D40C708DF140BDA1167CA946EA5528 "点击放大")

#### 背景知识

*   [Scroll](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scroll)为可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。
*   设置[fling](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-scroll#fling12)属性时，滚动类组件根据传入的初始速度进行惯性滚动。

#### 问题定位

1.  使用DevEco Testing查看问题组件，该组件为Scroll组件。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9b/v3/3WyKNVzZSqqFb9NFbRDASA/zh-cn_image_0000002658910379.png?HW-CC-KV=V1&HW-CC-Date=20260709T134017Z&HW-CC-Expire=86400&HW-CC-Sign=24D256EC20F9A3E4210A80A1235321D111D5A7CD891F50CA9E41B80A8038F9C6 "点击放大")
    
2.  查看该组件的设置，该组件设置了fling属性，且值不为0，进入页面时会有向下滚动的初速度。
    
    Scroll(this.scroller) {
      _// 列表组件_
    }
    .onAppear(() => {
      setTimeout(() => {
        this.scroller.fling(-100); _// 设置了fling属性，且值不为0_
      }, 500);
    })
    

#### 分析结论

Scroll组件设置了fling属性，且值不为0，进入页面时会有向下滚动的初速度，导致跳转到新页面时会自动滑动。

#### 修改建议

Scroll组件不设置fling属性。

@Entry
@Component
struct Index {
  pageInfos: NavPathStack = new NavPathStack();

  build() {
    Navigation(this.pageInfos) {
      Stack() {
        Button('点击跳转')
          .backgroundColor('#0A59F7')
          .fontColor(Color.White)
          .borderRadius('50%')
          .width(130)
          .height(50)
          .onClick(() => {
            this.pageInfos.pushPath({ name: 'Scroll' }); _// 跳转到新页面_
          });
      }
      .height('100%')
      .width('100%');
    }
    .hideTitleBar(true)
    .height('100%')
    .width('100%')
    .mode(NavigationMode.Stack);
  }
}

跳转后的页面src/main/ets/pages/ScrollPage.ets：

import { common } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';

@Builder
export function ScrollPageBuilder() {
  ScrollPage();
}

@Entry
@Component
struct ScrollPage {
  pageInfos: NavPathStack = new NavPathStack();
  private scroller = new Scroller();
  @State arr: number\[\] = \[1, 2, 3, 4, 5, 6, 7, 8, 9, 10\];

  build() {
    NavDestination() {
      Scroll(this.scroller) {
        Column({ space: 10 }) {
          ForEach(this.arr, (item: number) => {
            Text(item.toString())
              .width('90%')
              .height(150)
              .backgroundColor('#f1f3f5')
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center);
          });
        }
        .width('100%');
      }
      _// 不设置fling属性_
      .scrollBar(BarState.Off)
      .friction(0.1)
    }
    .onBackPressed(() => {
      this.pageInfos.pop(); _// 弹出路由栈栈顶元素_
      return true;
    })
    .onReady((navContext: NavDestinationContext) => {
      this.pageInfos = navContext.pathStack;
      let context: common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext;
      window.getLastWindow(context).then((lastWindow) => {
        lastWindow.setWindowLayoutFullScreen(true);
      });
    })
    .hideTitleBar(true)
    .height('100%')
    .width('100%')
    .padding({ top: '123px' })
    .expandSafeArea(\[SafeAreaType.SYSTEM\], \[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM\]);
  }
}

src/main/resources/base/profile/router\_map.json：

{
  "routerMap": \[
    {
      "name": "Scroll",
      "pageSourceFile": "src/main/ets/pages/ScrollPage.ets",
      "buildFunction": "ScrollPageBuilder"
    }
  \]
}

src/main/module.json5文件中需添加"routerMap": "$profile:router\_map"。

效果图如下：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/32/v3/g-e6H3E7TxeTmxTOO85Z0g/zh-cn_image_0000002628391174.png?HW-CC-KV=V1&HW-CC-Date=20260709T134017Z&HW-CC-Expire=86400&HW-CC-Sign=4D126B26ACB73C40604F1933FA4BA0D60C7BE45A6E7169924652ED0174F6535F "点击放大")