OnScroll 事件离子 2

Posted 2023-03-13

【中文标题】OnScroll 事件离子 2

【英文标题】：OnScroll event Ionic 2

【发布时间】：2017-08-28 10:18:22

【问题描述】：

当用户在 Ionic 2 上滚动时拿起让我感到困惑。我基本上想说，当用户向下滚动页面时，做点什么。

任何例子都会很棒。

更新：

我的构造函数中有这个，所以当页面滚动时我想关闭键盘，因为它保持打开状态并且没有其他方法可以关闭。

import  Component, ViewChild  from '@angular/core';
import  NavController, NavParams, Content  from 'ionic-angular';
import  Keyboard  from '@ionic-native/keyboard';

export class SearchPage 

  @ViewChild(Content)
  content:Content;

  constructor(public keyboard: Keyboard, public formBuilder: FormBuilder, public navCtrl: NavController, public navParams: NavParams, public apiAuthentication: ApiAuthentication, private http: Http) 

    this.content.ionScroll.subscribe((data)=>
      this.keyboard.close();
    );
  

但是我得到了这个错误Cannot read property 'ionScroll' of undefined我把它放在错误的地方了吗？

【问题讨论】：

我假设您的视图中有<ion-content> 标签？而且您可能必须在 ionic 的视图生命周期之一而不是构造函数中订阅事件。

【参考方案1】：

您可以订阅内容事件。

内容有3 output events:

ionScroll

在每次滚动事件时发出。

ionScrollEnd

滚动结束时发出。

ionScrollStart

首次开始滚动时发出。

收听一个事件：

@ViewChild(Content)
content: Content;
// ...
ngAfterViewInit() 
  this.content.ionScrollEnd.subscribe((data)=>
    //... do things
  );

或者从 DOM 中执行：

<ion-content (ionScroll)="onScroll($event)">

对于离子 4

<ion-content [scrollEvents]="true" (ionScroll)="onScroll($event)">

【讨论】：

谢谢你！我更新了这个问题，但我遇到了一个错误

子组件Content得到了吗？

是的，我再次更新以显示 .ts 文件的主要方面

编辑了我的帖子。

在 ios 中不起作用，您还有其他想法吗？还是解决方案？

【参考方案2】：

您可以使用 ngOnInit 方法注册滚动事件：

ngOnInit() 
   if (this.content) 
      this.content.ionScroll.subscribe((data)=>
        this.keyboard.close();
      );
    
  

【参考方案3】：

当在自定义指令中尝试这样的事情：

import  Renderer2  from '@angular/core';
...
constructor(private renderer: Renderer2) 

ngOnInit() 
    this.renderer.listen(this.myElement, 'scroll', (event) => 
        // Do something with 'event'
        console.log(this.myElement.scrollTop);
    );