angular2 中的无限滚动，用于儿子数据加载 75%

Posted 2023-02-22

【中文标题】angular2 中的无限滚动，用于儿子数据加载 75%

【英文标题】：infinite scroll in angular2 for son data load 75%

【发布时间】：2018-06-12 06:03:12

【问题描述】：

我想创建无限滚动功能，其中最初只加载 JSON 数据的第一个值，即第一篇文章应该加载，向下滚动到页面的 3/4(75%) 部分后在底部加载下一篇文章，下一个加载的文章也会发生同样的事情。 我正在使用带有 rxjs observable 的 angular js： https://codeburst.io/angular-2-simple-infinite-scroller-directive-with-rxjs-observables-a989b12d4fb1

下面是代码： app.component.ts

import  Component  from '@angular/core';
import  Http, Response  from '@angular/http';
import  Observable  from 'rxjs/Observable';
import  NewsService  from './news.service';
import  NavBarComponent  from './navbar.component';
import 'rxjs/add/operator/map';

@Component(
  selector: 'app-root',
  styleUrls: ['./app.component.css'],
  templateUrl: './app.component.html',
  providers: [NewsService]
)
export class AppComponent 

 currentPage: number = 1;

  news: Array<any> = [];

  scrollCallback;

  constructor(private newsService: NewsService) 

    this.scrollCallback = this.getStories.bind(this);
  

  getStories() 
    return this.newsService.getLatestStories(this.currentPage).do(this.processData);
  

  private processData = (news) => 
    this.currentPage++;
    this.news = this.news.concat(news.json());
    console.log(this.news);
  

news.service.ts

import  Injectable  from '@angular/core';
import  Http  from '@angular/http';

const BASE_URL = 'https://www.eremnews.com/wp-json/wp/v2/posts?minified=true';

@Injectable()
export class NewsService 

  constructor(private http: Http)  

  getLatestStories(page: number = 1) 
    return this.http.get(`$BASE_URL/news?page=$page`);
  

app.component.html

<ul id="infinite-scroller"
  appInfiniteScroller
  scrollPerecnt="70"
  immediateCallback="true"
  [scrollCallback]="scrollCallback">
    <li *ngFor="let x of news">

     <h1>x.title.rendered | json</h1> <br>
    <figure style="padding:20px"><img [src]="x.post_thumbnail.thumbnail"></figure> 
      <div class="details">
        <p>x.content.rendered |json</p><br>
      </div>
      <p>x.date_gmt_lang |json</p>

    </li>
</ul>

在我的代码中，最初，所有数据都在第一页加载。我只想在页面向下滚动时加载文章，在路由器 URL 中我想显示文章的 ID。

【参考方案1】：

您必须确保ul 元素具有滚动条，如源代码app.component.scss 中所示。 [] 在 html 中围绕 immediateCallback 属性。

否则，将您的代码与有效的source进行比较

【讨论】：

无限滚动正在工作，但最初，我只想从 JSON 加载第一篇文章。目前，在页面加载时，正在加载完整的 JSON，[…，…，…， …、…、…、…、…、…、…]0：id：1135427，日期：“2018-01-02T20:02:24”，date_gmt ：“2018-01-02T16:02:24”，guid：…，修改：“2018-01-02T20:02:24”，…1：id：1135543，日期：“2018-01-02T19 :55:14", date_gmt: "2018-01-02T15:55:14", guid: …, 修改: "2018-01-02T19:55:14", …2: id: 1135440, 日期：“2018-01-02T19:48:08”，date_gmt：“2018-01-02T15:48:08”，guid：…，修改：“2018-01-02T19:48:08”，…

我想显示如下页面：eremnews.com/news/arab-world/1127149 JSON FILE：eremnews.com/wp-json/wp/v2/posts?minified=true