记录--Loading 用户体验 - 加载时避免闪烁

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

在切换详情页中有这么一个场景，点击上一条，会显示上一条的详情页，同理，点击下一条，会显示下一条的详情页。

伪代码如下所示：

我们定义了一个 switcher 模版， 用户点击上一条、下一条时调用 goToPreOrNext 方法。该页面通过 loadingDone 状态判断是否展示加载效果。

// html
<thy-loading [thyDone]="loadingDone"></thy-loading>
<ng-container *ngIf="loadingDone">
	<styx-pivot-detail>
		...
		<thy-arrow-switcher
			...
		  (thyPrevious)="goToPreOrNext($event)"
		  (thyNext)="goToPreOrNext($event)"
		></thy-arrow-switcher>
	...
	</styx-pivot-detail>
</ng-container>

在 goToPreOrNext 方法中，当调用该方法时，通过 goToPreOrNextResolve 接口返回下一条的详情 id，通过该 id 请求详情数据。

// 请求下一条 id
fetchPreOrNext(event: ThyArrowSwitcherEvent) {
	...
	this.goToPreOrNextResolve(event.index, topicId).subscribe(
		(id: string) => {
			this.getDetail(id);
		}
		...
	)
}

// 请求详情数据
getDetail(postId: string) {
	this.loadingDone = false;
	this.store
      .fetchPost(postId)
      .pipe(
          finalize(() => {
              this.loadingDone = true;
          })
      )
      .subscribe();
}

这看起来好像没有什么问题，应该一般都是这么干的，我们运行看看。

标签：Loading,showLoadingIndicator,--,loadingDone,pipe,subscribe,result,id,加载
From： https://www.cnblogs.com/smileZAZ/p/17625210.html