3

我正在尝试在 Angular 4 应用程序中集成具有无限滚动功能的砌体网格。

我将以下库 masonry.desandro.com用于砌体 并用于无限滚动：ngx-infinite-scroll

滚动时遇到问题，项目重叠。我不知道我是否没有正确初始化它。我感谢任何帮助，即使这意味着使用其他与 angular 4 一起工作的库。

我的代码如下所示：

*笨蛋

html:

<div class="search-results" infinite-scroll [infiniteScrollDistance]="2" 
      [infiniteScrollThrottle]="10" (scrolled)="onScrollDown()"
       [scrollWindow]="true">
   <div class="grid">
      <div class="grid-item grid-item--height{{i}}" *ngFor="let i of array">
      {{i}}
   </div>
</div>

我的组件：

export class HomeComponent implements OnInit {

  ngOnInit() {    
   jQuery(document).ready(function () {
     jQuery('.grid').masonry({
     // options
     itemSelector: '.grid-item',
     columnWidth: 200
     });
   });
 }
array = [];
sum = 20;

modalIsOpen = '';

constructor() {
  for (let i = 0; i < this.sum; ++i) {
  this.array.push(i);
  }
 }

onScrollDown() {

console.log('scrolled!!');
// add another 20 items
const start = this.sum;
this.sum += 20;
  for (let i = start; i < this.sum; ++i) {
   this.array.push(i);
   }
  }
}
4

1 回答 1

0

我会建议你停止使用 jQuery 和 Angular，但是你可以使用这个包 https://www.npmjs.com/package/angular2-masonry

这个很容易使用，不需要 jQuery，如果你需要帮助，请告诉我，我会给你一些提示。

对于无限滚动，在 Angular 中，我个人使用滚动事件侦听器并在每次滚动时显示数据 4 per 4（我的窗口最多可以包含 4 个项目），因此每次滚动时都会获得 4 个更多项目。

于 2017-11-24T13:59:22.443 回答