如何垂直离子项目滚动到ionic 4中的上下箭头图标按钮的底部和顶部？

Question

我正在创建Ionic 4 plus Angular App，我想添加向上和向下箭头按钮以垂直滚动从上到下，反之亦然。

Answer 1

You can use the Content component to handle scrolling in code. You can use scrollToTop() or scrollToBottom() as well as scrollToPoint() , whatever fits your need.

For more info see https://ionicframework.com/docs/api/content#scrollToTop

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

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

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

Answer 2

check the ionic docs for info on component methods 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();
}

}