如何在离子页面顶部滚动

Question

目前我在 javascript 和 angular-js 上的 ionic 框架中工作，我只是放置搜索框并呈现客户列表，但假设在第一次尝试时我可以使用“a”搜索它显示所有具有 alpha 'a' 的项目但是问题是当我向下滚动以查看搜索结果列表时，如果我想使用“d”进行搜索，这次它会给出结果，但在页面顶部，但我的滚动条位于页面底部。 因此，为了解决上述问题，我想在搜索查询为空时在页面顶部设置滚动位置并显示所有客户，那么我应该怎么做才能解决这个问题

谢谢你的建议。

Answer 1

你可以试试：

$ionicScrollDelegate.scrollTop();

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

Answer 2

对于 Ionic 2 及更高版本，请在内容类上使用 scrollToTop() 方法。

page.html

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

page.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

Answer 3

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

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。

Answer 4

对于 Ionic 4，它已从 Content 重命名为 IonContent，以及新的包名称：

• Breaking: Component Imports Changes

让 sn-p 看起来像这样：

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://stackoverflow.com/a/48987846/156388) 提供此答案的基础。

我没有编辑该答案，因为它对 Ionic 2-3 仍然有效。

Answer 5

上面的答案会将您的所有视图滚动到顶部。如果您想获得更多控制权，则必须使用委托处理程序。

首先，无论您想滚动什么，都必须添加委托处理程序名称

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

在你的控制器中你必须使用这个处理程序

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

我建议使用 $timeout，因为如果有当前的摘要周期，它将不起作用。如果要为滚动设置动画，也将 false 更改为 true。最后别忘了在你的控制器中注入 $ionicScrollDelegate 和 $timeout

Answer 6

对于 Ionic 4.X 最新稳定版本试试这个

来源Link

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

<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);
      }

Answer 7

对于 Ionic 4，这里的方法帮助很大。但是，在

上需要第二个参数

@ViewChild(IonContent) content: IonContent;

所以，我按照here 的建议将静态设置为 false。但它只在我改变时才对我有用：

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

到

@ViewChild(IonContent, undefined) content: IonContent;