Question

我正在开发Ionic2应用程序。我想在离子滚动内放大图像。我怎么能这样做。

    <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

我可以通过为点击事件编写一个小代码来缩放离子滚动内的图像。此代码经过测试并在android / ios ionic中工作2.点击一次放大，再次点击缩小。对于ios，只需在离子内容中添加溢出滚动即可实现平滑滚动。

.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>

如何在离子滚动内放大图像

1 个答案: