ionic3中监听ion-content的滚动事件

发布于 6 年前 作者 vueper 4823 次浏览 最后一次编辑是 6 年前 来自 分享

ionic3中如何监听ion-content的滚动事件呢?

1、找到视图文件监听 ion-content的ionScroll事件 (ionScroll)=“ionScroll()”

<ion-content padding (ionScroll)="ionScroll()">
  <h2>Welcome to Ionic!</h2> 
  <p>我是首页</p>
  <p>我是首页</p>
  <p>我是首页</p>
  <p>我是首页</p>
  <p>我是首页</p>
  <p>我是首页</p>  
  <p>我是首页</p>
  这里写更多内容 让滚动条滚动起来....
</ion-content>

2、找到对应的业务逻辑js 获取ion-content的dom节点然后在自定义的ionScroll中获取滚动条高度

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


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild(Content) content: Content;

  constructor(public navCtrl: NavController) {

  }
  
  ionScroll(){

    console.log(this.content.scrollTop)
  }

}

回到顶部