ionic2 - 如何在 ionic 滚动中缩放图像

Question

我正在开发 Ionic2 应用程序。我想在 ion-scroll 中缩放图像。我该怎么做。

    <ion-scroll scrollX="true" scrollY="true" zoom=true>
      <img src="https://aa.com/app/package_content/s78c_e4vt6/main_images/pg_114.jpg" />
  </ion-scroll>

Answer 1

我可以通过为 tap 事件编写一小段代码来缩放 ion-scroll 中的图像。此代码在 android/ios ionic 2 中经过测试和工作。点击一次放大，再次点击缩小。对于 ios，只需在 ion-content 中添加 overflow scroll 即可平滑滚动。

.ts 页面:

  export class PageName {

constructor() {
}
public tap: number = 600;

tapEvent(e) {
    if (this.tap != 700) {
        this.tap = 700;
    }
    else
        this.tap = 600;
}}

html:

 <ion-content style="background-image:url(assets/img/image1.PNG); white-space: nowrap; overflow: scroll; overflow-x:scroll; height: 100%">
     <ion-scroll scrollX="true" scrollY="true" (tap)="tapEvent($event)" zoom="true" style="width:100%;height:100%;text-align:center;">
       <div class="scroll-item" style="  width:100%; white-space: nowrap; overflow: scroll;">
            <img [ngStyle]="{'width' : tap + 'px', 'min-width' : tap + 'px'}" alt="logo" src="assets/img/image2.PNG">
       </div>    
    </ion-scroll>  </ion-content>