如何在ionic中将页面滚动到顶部

Question

目前我正在使用 Ionic 框架、JavaScript 和 AngularJS 进行开发。我已经添加了一个搜索框并渲染了客户列表。但是，假设在第一次尝试中，我使用 'a' 进行搜索，它会显示所有包含 'a' 的项。问题在于，当我向下滚动查看搜索结果列表并且在页面底部时，如果我想要搜索 'd'，此时它会在页面顶部给出结果，但我的滚动位置在页面底部。

为了解决上述问题，当搜索查询为空并显示所有客户时，我想将滚动位置设置在页面顶部。那么我应该怎么做才能解决这个问题呢？

先感谢您的帮助。

返回结果：

目前我正在使用 Ionic 框架、JavaScript 和 AngularJS 进行开发。我已经添加了一个搜索框并渲染了客户列表。但是，假设在第一次尝试中，我使用 'a' 进行搜索，它会显示所有包含 'a' 的项。问题在于，当我向下滚动查看搜索结果列表并且在页面底部时，如果我想要搜索 'd'，此时它会在页面顶部给出结果，但我的滚动位置在页面底部。

为了解决上述问题，当搜索查询为空并显示所有客户时，我想将滚动位置设置在页面顶部。那么我应该怎么做才能解决这个问题呢？

先感谢您的帮助。

- Rohit Deshmukh

Answer 1

你可以尝试：

$ionicScrollDelegate.scrollTop();

http://ionicframework.com/docs/api/service/$ionicScrollDelegate/

- Grégoire Motot

---

非常感谢，正是我所需要的！ - Stan

Answer 2

对于 Ionic 2 及以上版本，请在 content 类上使用 scrollToTop() 方法。

page.html

<ion-content>
  Add your content here!
</ion-content>

页面.ts

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;

  scrollToTop() {
    this.content.scrollToTop();
  }
}

请参阅http://ionicframework.com/docs/api/components/content/Content/#scrollToTop

- Pavel Chuchuva

---

无法正常工作，出现了错误- 运行时错误。无法读取空值的 'scrollToTop' 属性。 - Sunny Kumar

@SunnyKumar 试试这个：this.content && this.content.scrollToTop() - desigNerd

Answer 3

对于Ionic 4，这已经从Content更名为IonContent，同时还有一个新的包名称:

• Breaking: 组件导入更改

使代码片段看起来像这样:

import { Component, ViewChild } from '@angular/core';
import { IonContent } from '@ionic/angular';

@Component({...})
export class MyPage{
  @ViewChild(IonContent) content: IonContent;

  scrollToTop() {
    this.content.scrollToTop(400);
  }
  ionViewDidEnter(){
    this.scrollToTop();
  }
}

感谢@Junaid (https://dev59.com/k1wY5IYBdhLWcg3wkIYi#48987846) 提供了这个答案的基础。

我没有编辑那个答案，因为它仍然适用于Ionic 2-3。

- rtpHarry

Answer 4

我通常在我的主页上这样做。

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;

  scrollToTop() {
    this.content.scrollToTop(400);
  }
  ionViewDidEnter(){
    this.scrollToTop();
  }
}

或者您可以随时调用scrollTop()。 注意：400是以毫秒为单位的持续时间，这是可选的，您也可以使用它

this.content.scrollToTop();

在这种情况下，scrollToTop()将设置默认值为300。

- Junaid

Answer 5

在Ionic 6+中，您需要声明元素的ID以进行引用，您可以在声明类型时使用any，但为了更具体，您可以像以前的版本一样设置IonContent。这显然是针对Ionic的Angular风格。

因此，在添加ID之后，例如我称我的内容为“content”： 现在，您可以通过ViewChild在TypeScript中引用此元素，就像以前的版本一样。

现在你可以利用文档中概述的方法。例如：

- Grant

Answer 6

对于Ionic 4，这些方法确实有所帮助。然而，在此还需要第二个参数。

@ViewChild(IonContent) content: IonContent;

所以，我按照这里的建议将static设置为false。但是只有当我改变了以下内容时它才对我起作用：

@ViewChild(IonContent, {static: false}) content: IonContent;

到

@ViewChild(IonContent, undefined) content: IonContent;

- Gi Tavares

Answer 7

如果你需要Ionic 4.X的最新稳定版本，请尝试以下方法

来源 链接

在页面上，添加Angular变量id到ion-content标签中。

<ion-content
  [scrollEvents]="true"
  (ionScrollStart)="logScrollStart()"
  (ionScroll)="logScrolling($event)"
  (ionScrollEnd)="logScrollEnd()"
>

     <ion-button (click)="ScrollToTop()">
        Scroll To Top
     </ion-button>

</ion-content>

在组件中添加方法。

      logScrollStart(){
        console.log("logScrollStart : When Scroll Starts");
      }

      logScrolling(){
        console.log("logScrolling : When Scrolling");
      }

      logScrollEnd(){
        console.log("logScrollEnd : When Scroll Ends");
      }

      ScrollToBottom(){
        this.content.scrollToBottom(1500);
      }

      ScrollToTop(){
        this.content.scrollToTop(1500);
      }

      ScrollToPoint(X,Y){
        this.content.scrollToPoint(X,Y,1500);
      }

- Code Spy

Answer 8

上面的答案将把您所有的视图滚动到顶部。如果您想要更多的控制，那么您就需要使用代理处理程序。

首先，您需要添加委托处理程序名称来滚动您想要滚动的内容。

<ion-content delegate-handle="dashboard">
   ......
</ion-content>

在你的控制器中，你需要使用这个处理程序。

$timeout(function(){$ionicScrollDelegate.$getByHandle('dashboard').scrollTop(false);});

我建议使用$timeout，因为如果当前存在脏检查循环，它将无法工作。此外，如果要动画滚动，请将false更改为true。最后，在控制器中不要忘记注入$ionicScrollDelegate和$timeout。

- Raj Nandan Sharma

Answer 9

对于最新的Ionic版本：

**temp.html**

<ion-content #menuPageTop>
  ...
</ion-content>

在 TypeScript 文件中进行这些更改。

import { IonContent } from '@ionic/angular';
export class ChooseMenuPageComponent {
@ViewChild('menuPageTop') private menuPageTop: IonContent;
...
yourEventHandler() {
  this.menuPageTop.scrollToTop();
 }
}

- Wiki