Question

使用Ionic3，我正在使用VirtualScroll和一个正在改变的数组（排序键和排序顺序）。我想在操作数组之前显示一个微调器，并在完成后隐藏它。基本上

html的

<ion-list [virtualScroll]="vsArray">
    <button ion-item *virtualItem="let item" (click)="didSelectRow(item)">
        {{item}}
    </button>
...

.TS

document.getElementById("mySpinner").setAttribute('style', 'visibility:visible');
tmpArray = vsArray;    //prevent virtualScroll reset/trigger
tmpArray.sort(...);    //prepare array
vsArray = tmpArray;    //trigger virtualScroll update
document.getElementById("mySpinner").setAttribute('style', 'visibility:hidden');

问题是spinner DOM更新发生的是序列，而vsArray更改触发的VirtualScroll更新在此代码序列之后异步发生。我尝试使用DOMController.write而不是直接访问DOM，但我有相同的行为，因为在VirtualScroll DOM更新之前，spinner DOM更新已排队。

如何在VirtualScroll更新完成后确保微调器隐藏???

感谢任何输入

Answer 1

Ionic 3具有<ion-spinner></ion-spinner>组件，您可以使用。在<ion-list>顶部的某处添加。然后，向其添加*ngIf以显示和隐藏它。

<ion-spinner *ngIf="showSpinner"></ion-spinner>
<ion-list ...>

@Component({ ... })
export class ComponentName {
  showSpinner:boolean = true; // default so it shows 

  getDataForIonList() {
     this.someAPI.get()
     .then((res:any) => {
        this.showSpinner = false;
     });
  }

}

Ionic3 VirtualScroll：在更新之前显示微调器并在更新完成时隐藏它

1 个答案: