当离子列表包含更多数据时,动态添加离子滑动元素

时间:2019-05-17 03:25:12

标签: javascript arrays typescript ionic3 ion-slides

我有一个项目列表,我从列表中单击一个项目以显示在幻灯片中。我的要求是在列表中单击/选择一个离子幻灯片后显示所有项目。

例如,我从列表中单击第100个元素,则初始幻灯片将为第100个元素,我能够将初始幻灯片设置为第100个元素,但加载幻灯片需要花费时间(约20秒)。而不是将所有数组传递给滑动模态,我尝试在向左和向右滑动后首先传递一个元素,然后将其余元素添加到离子幻灯片数组中。我无法实现,请就此问题向任何人提供帮助。

我已经尝试过了,但是它不起作用,在滑动第一张幻灯片没有移动到下一个元素之后,我们必须滑动两次或三次才能将其移动到下一张幻灯片

Ionic slides - dynamically add slides before and after

<ion-slides pager="false" #mySlides 
  (ionSlideDidChange)="onSlideChanged(mySlides); 
   mySlides.update()">
   <ion-slide *ngFor="let g of imgGallery; let i = index">
  <img [src]="aoiimageUrl + g.viewImage + '?token=' + token" 
     class="slider__image sploading" />
  </ion-slide>
 </ion-slides>


onSlideChanged(newSlides) {
   console.log("onSlideChanged mySlides ", newSlides);
   let index = this.slides.realIndex;
   console.log("onSlideChanged index ", index);
   if (newSlides.swipeDirection == "next") {
    this.zone.run(() => {  
    this.imgObject.push(this.imgGallery[this.slideNumber + 1]);
    //this.slides.slideNext();

  });  
  console.log("onSlideChanged this.imgObject ", this.imgObject);
  this.slides.update();
  let i = this.slideNumber++; 
  console.log("iiiii -- ", i);
  this.slides.slideTo(i, 0, true);
  this.cdr.detectChanges();
  // setTimeout(() => {
  //   this.slides.update(); // loop broken here.
  // }, 500);
  }

  }

注意-代码已出于调试目的进行了修改,我已经尽一切可能

0 个答案:

没有答案