滚动事件Ionic 2/3更新DOM

Question

我想在用户向下滚动时执行进度条。当它一直向下时，条形宽度为100％。

问题是＆＃34; per＆＃34;值不会更新以在滚动事件

上查看

我已经检查了this和this，但没有找到

模板

<ion-header>
  <ion-navbar color="primary">
    <ion-title>{‌{title}} ({‌{code}})</ion-title>
  </ion-navbar>
</ion-header

<ion-content>
<ion-toolbar style="position: fixed; opacity: 0.8; z-index: 1" *ngIf="readProgress">
    <div id="bar" color="primary">{‌{per}} 30%</div>
</ion-toolbar>
</ion-content>

TS FILE

this.content.ionScroll.subscribe((data) => {
  if (data.scrollTop < 1) {
    this.readProgress = false;
    this.title='Not Scrolling';
  } else if (data.scrollTop > 0) {
    this.readProgress = true;
    this.title='Scrolling';
  }
  this.per = data.scrollTop;  
});

Answer 1

我终于通过在'per'值更改

之后进行Angular检测更改来实现它

1。进口

import {ChangeDetectorRef, Component, EventEmitter, Output, ViewChild} from "@angular/core";

2。构造

constructor(public navCtrl: NavController, public navParams: NavParams, public cdRef: ChangeDetectorRef) {
      }

3。在滚动事件

   this.content.ionScroll.subscribe((data) => {
          if (data.scrollTop < 1) {
            this.readProgress = false;
            this.title='Not Scrolling';
          } else if (data.scrollTop > 0) {
            this.readProgress = true;
            this.title='Scrolling';
          }
          this.per = data.scrollTop;  
            this.cdRef.detectChanges();
        });