3

我正在尝试使用 ion-modal 中的 ion-slide 显示图像预览。但是缩放功能不起作用。我添加了幻灯片选项。但不工作。随后，缩放功能与普通页面一起使用。

backdropDismiss : true单击背景时第二个问题未关闭模式

这是代码

page.html

<ion-slides [options]="slideOpts">
    <ion-slide *ngFor="let p of products">
          <img [src] = 'p.image_url' tappable (click)="openPreview(p.image_url)">

     </ion-slide>
 </ion-slides>

页面.ts

async openPreview(image_url){
    console.log(image_url)

    const modal = await this.modalController.create({
      component: ImageModalPage,
      showBackdrop:true,
      backdropDismiss: true,
      componentProps: {
        image_url : image_url,
      },
    });
    return await modal.present();

  }

模态的.html

<ion-item class="close-fake" lines="none" text-center>
    <ion-button (click)="close()" fill="clear" color="light">
      <ion-icon name="close" slot="start"></ion-icon>
      back
    </ion-button>

    <ion-slides [options]="sliderOpts">
        <ion-slide>
          <div class="swiper-zoom-container">
            <img [src] ='image_url'>
          </div>
        </ion-slide>
      </ion-slides>

模态的.ts

    sliderOpts = {
        zoom: {
          maxRatio: 5,
        }
      }

close(){
    this.modalController.dismiss()
  }
4

2 回答 2

5

在 html 中设置事件 (ionSlidesDidLoad)="ionViewDidEnter" 和 #slides 用于获取代码

 @ViewChild("slides") slides!: any;
 ionViewDidEnter(){
    this.slides.update();
  }
于 2020-08-06T14:39:51.900 回答
1

有类似的问题并通过稍后通过 *ngIf 将滑块添加到 DOM 来解决它

来自这里的解决方案：https ://github.com/ionic-team/ionic-framework/issues/17522#issuecomment-466631844

于 2020-08-28T15:17:10.610 回答