angular - 在角度应用程序中向上而不是向下加载更多按钮推送元素
问题描述
我有一个角度应用程序。直到今天它在谷歌浏览器中运行良好,但今天当我点击加载更多按钮时,加载更多按钮仍然存在,并且每次在顶部推送 10 个产品。这意味着当我们单击更多按钮时,一些数据加载并且更多按钮通过滚动而下降,我们可以再次加载,但在我的情况下,加载更多按钮总是在屏幕上并且产品加载它是顶部。滚动位置更改并始终在加载按钮上保持位置。但在 Microsoft Edge 中它工作正常。你能帮我解决这个问题吗?
我的html在这里..
<mat-card class="mb-2">
<ng-container *ngFor="let fruit of fruits; let i = index;">
<div class="row pad-20" *ngIf="(i % 2 === 0)">
<div class="col-sm-6 mouse-hover d-flex justify-content-center">
<img class="cart-deatils-img" mat-card-image
src="
{{appHost.hostName}}images/fruitImages/{{fruit?.fileName[0]}}">
</div>
<div class="col-sm-6 vertically-center">
<mat-card-content>
<br />
<div>
<span class="display-2 shadow-text text-center font-weight>
{{fruit?.name}}
</span>
<span>(<span *ngFor="let star of getFullStar(fruit?.rating)"
class="material-icons color-orange font-13">
grade
</span>
<span *ngFor="let star of getOutlineStar(fruit?.rating)"
class="material-icons color-orange font-13">
star_border
</span>)
</span>
</div>
<div>
<span *ngIf="!fruit?.isActive" class="badge badge-warning
shadow-text text-center font-weight-bold my-3">
Unavailabe
</span>
</div>
<div class="mb-4 font-13">
<span>
{{fruit?.description}}
</span>
</div>
<a class="no-decoration font-13"
routerLink="/general-user/fruit/details/{{fruit?.id}}">
<button mat-mini-fab color="warn"
aria-label="Example icon button with a filter list icon">
<mat-icon>call_missed_outgoing</mat-icon>
</button> <span style="padding: 10px;">SEE DETAILS</span>
</a>
</mat-card-content>
</div>
</div>
<div class="row mt-4 pad-20" *ngIf="!(i % 2 === 0)">
<div class="col-sm-6 vertically-center">
<mat-card-content>
<br />
<div>
<span class="display-2 shadow-text text-center font-weight-
bold my-3">
{{fruit?.name}}
</span>
<span>(<span *ngFor="let star of getFullStar(fruit?.rating)"
class="material-icons color-orange font-13">
grade
</span>
<span *ngFor="let star of getOutlineStar(fruit?.rating)"
class="material-icons color-orange font-13">
star_border
</span>)
</span>
</div>
<div>
<span *ngIf="fruit?.isActive" class="badge badge-success
shadow-text text-center font-weight-bold my-3">
Availabe
</span>
<span *ngIf="!fruit?.isActive">
Unavailabe
</span>
</div>
<div class="mb-4 font-13">
<span>
{{fruit?.description}}
</span>
</div>
<a class="no-decoration font-13"
routerLink="/general-user/fruit/details/{{fruit?.id}}">
<button mat-mini-fab color="warn"
aria-label="Example icon button with a filter list icon">
<mat-icon>call_missed_outgoing</mat-icon>
</button> <span style="padding: 10px;">SEE DETAILS</span>
</a>
</mat-card-content>
</div>
<div class="col-sm-6 mouse-hover d-flex justify-content-center">
<img class="cart-deatils-img" mat-card-image
src="
{{appHost.hostName}}images/fruitImages/{{fruit?.fileName[0]}}">
</div>
</div>
</ng-container>
<div *ngIf="!noMore" class="mb-1 mt-4 font-roboto row d-flex justify-content-
center">
<button type="button" class="btn-not-focus" mat-raised-button style="
background: #F25C05; color: white; width: 250px;
font-size: 15px;" (click)="onLoadMore()">
<span *ngIf="!isProgress" class="material-icons icon-vertical">
hourglass_empty
</span>
<span *ngIf="!isProgress" class="font-with-text"> Load More
Fruit</span>
<span *ngIf="isProgress" class="processing-span">Loading Fruit
Wait...
<mat-spinner [diameter]="30" class="spinner-sapn"></mat-spinner>
</span>
</button>
</div>
</mat-card>
我的加载更多功能在这里
onLoadMore(){
this.isProgress = true;
this.fruitService.getByCount(this.fruits.length).subscribe((res: any) => {
if (res.obj != null) {
let fruit = res.obj;
let length = fruit.length;
if(length < 4){
this.noMore = true;
}
for(let i = 0; i < fruit.length; i++){
this.fruits.push(fruit[i]);
}
}
this.isProgress = false;
}, e =>{
this.isProgress = false;
this.noMore = true;
});
}
我在这里加载每条路线
<mat-sidenav-container class="sidenav-container font-roboto">
<!-- <mat-sidenav [opened]="showAllTabNav" #drawer class="sidenav" fixedInViewport> -->
<mat-sidenav-content>
<ng-content></ng-content>
<div>
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
解决方案
我最近在 React with Chrome 中遇到了同样的问题。
目前的修补程序是添加overflow-anchor: none;
到按钮的 CSS,甚至是内容的容器
我在这里更详细地回答了: https ://stackoverflow.com/a/63327574/14062868
推荐阅读
- python - 如何在python中使用shell命令将pdf转换为jpg?
- c# - 使用 Google Drive API 在 Google Doc 上获取评论:评论所有者的 EmalAddress 返回 null
- r - 循环遍历数据框以生成新列
- c++ - *++*++ppp,*++pp[1],*++(*(1+ppp)有什么具体区别吗?(C/C++指针问题)
- python - 我如何通过我的 Python 脚本为开发人员发送 whatsapp 消息
- amazon-web-services - 如何向 AWS S3 存储桶添加重定向规则?
- javascript - 当 useCallback 缺少依赖时 React useState 和 useCallback hook 如何工作
- sql-server - 由于 Excel 文件导入,其他用户无法登录
- javascript - 在 Firestore 中添加新文档时出现问题
- go - 在 go 中动态调用模型