在滚动事件中更新DOM IONIC 2/3

Question

我想在用户向下滚动时做一个进度栏。一路下降时，条是100％宽度。

问题是" per"值未更新以在滚动事件上查看

查看

我已经检查了一下，但是没有任何作用

模板

<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文件

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();
        });