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

Posted 2023-03-13

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

【英文标题】：How to Vertical ion-item Scroll to Bottom and Top on Down and Up arrow icon button click in ionic 4?

【发布时间】：2019-10-08 19:42:51

【问题描述】：

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

【参考方案1】：

您可以使用 Content 组件来处理代码中的滚动。 您可以使用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();
  

【参考方案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();