Question

我正在尝试在角度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);
   }
  }
}

Answer 1

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

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

对于无限滚动，在Angular中，我个人使用滚动事件监听器＆amp;每个卷轴上每4个显示数据4（我的窗口最多可包含4个项目）所以每次滚动时你都会得到4个项目。

如何整合砌体+无限滚动+角度

1 个答案: