如何在离子4中单击向下和向上箭头图标按钮垂直离子项目滚动到底部和顶部？答案

【问题标题】：How to Vertical ion-item Scroll to Bottom and Top on Down and Up arrow icon button click in ionic 4?如何在离子4中单击向下和向上箭头图标按钮垂直离子项目滚动到底部和顶部？
【发布时间】：2019-10-08 19:42:51
【问题描述】：

我正在创建 Ionic 4 plus Angular 应用程序，我想添加上下箭头按钮从上到下垂直滚动，反之亦然。

【问题讨论】：

标签： html typescript ionic4

【解决方案1】：

您可以使用 Content 组件来处理代码中的滚动。您可以使用scrollToTop() 或scrollToBottom() 以及scrollToPoint()，只要适合您的需要。

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

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

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

【讨论】：

【解决方案2】：

查看 ionic 文档以获取有关组件方法的信息 https://ionicframework.com/docs/api/content

.html

 <ion-content>
   <ion-icon name="arrow-dropdown" (click)="scrollToBottom()"></ion-icon>

    //..... your content ......

     <ion-icon name="arrow-dropup" (click)="scrollToTop()"></ion-icon>
 </ion-content>

.ts

    import { Component, ViewChild } from '@angular/core';
    import {IonContent} from '@ionic/angular';
    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage {
         @ViewChild(IonContent) theContent: IonContent;


    scrollToBottom(){
    this.theContent.scrollToBottom();
}
   scrollToTop(){
    this.theContent.scrollToTop();
}

}

【讨论】：