如何在离子页面顶部滚动

Question

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

感谢adv ..

Answer 1

上面的答案会将您的所有观看次数都滚动到顶部。如果你想拥有更多控制权，那么你将不得不使用委托处理程序。

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

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

在您的控制器中，您必须使用此处理程序

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

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

Answer 2

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

• Breaking: Component Imports Changes

使代码段看起来像这样：

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 3

适用于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 4

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

上需要第二个参数

@ViewChild(IonContent) content: IonContent;

因此，我按照建议的 here 设置了静态 false。但它只在我改变时对我有用：

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

到

@ViewChild(IonContent, undefined) content: IonContent;