Ionic4回到顶部功能

发布于 1周前 作者 phonegap100 最后一次编辑是 5天前 来自 分享

ionic4有ion-infinite-scroll组件可以让我们方便的实现移动端的分页查询逻辑(上拉加载更多操作)。可是在列表很长的时候,我们还需要一个可以快速返回列表顶部的功能。下面给大家介绍一下ionic4返回顶部的方法。

1、引入@angular/core模块下面的ViewChild

import { Component, OnInit ,ViewChild} from '[@angular](/user/angular)/core';

2、引入@ionic/angular模块下面的IonContent

import { NavController,IonContent} from '[@ionic](/user/ionic)/angular';

3、获取ion-content的dom节点对象

export class ProductlistPage implements OnInit {
  [@ViewChild](/user/ViewChild)(IonContent) content:IonContent;
   constructor(){   
   }
 }
 

**4、Ionic4回到顶部 this.content.scrollToTop(0); **

也可以通过this.content.scrollToTop(0); 改变右侧滚动条的位置

来源http://www.ionic.wang/article-index-id-167.html

回到顶部