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

Question

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

Answer 1

您可以使用内容组件来处理代码中的滚动。您可以根据需要使用 scrollToTop() 或 scrollToBottom() 以及 scrollToPoint()。

有关详细信息，请参阅 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

检查离子文档以获取有关组件方法的信息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();
}

}

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

How to Vertical ion-item Scroll to Bottom and Top on Down and Up arrow icon button click in ionic 4?

html

typescript

ionic4