イオンのピンチと画像の拡大

Question

イオンビューで画像を全幅にし、ピンチイベントでzoomIn/zoomOutを許可したいだけです。それは簡単に見えますが、私はそれを作ることができます！私はIonic1の新機能です。誰かが私を助けることができる？

私が試したが、私が望むものを達成することができませんでし何この：

<ion-view view-title="MAP"> <ion-content> <ion-scroll zooming="true" direction="xy" delegate-handle="zoom-pane" class="zoom-pane" scrollbar-x="false" scrollbar-y="false"> <img ng-src="img/map.png"> </ion-scroll> </ion-content> </ion-view>

Answer 1

はちょうどあなたがイオンスクロールでオーバーフロースクロール=「false」のプロパティを追加する必要がありますが

HTML

 <ion-scroll id="mapImage" 
       zooming="true" 
       direction="xy" 
       delegate-handle="zoom-pane" 
       class="zoom-pane" 
       min-zoom="1" 
       max-zoom="15" 
       overflow-scroll="false"> 
      <img ng-src="img/map.png"> 
    </ion-scroll> 

CSS

.zoom-pane { 
width: 100% !important; 
height: 100% !important; 
} 

.zoom-pane .scroll { 
    min-height: 100% !important; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    -webkit-flex-wrap: nowrap; 
    -ms-flex-wrap: nowrap; 
    flex-wrap: nowrap; 
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    -webkit-justify-content: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
    -webkit-align-content: stretch; 
    -ms-flex-line-pack: stretch; 
    align-content: stretch; 
    -webkit-box-align: center; 
    -moz-box-align: center; 
    -webkit-align-items: center; 
    -ms-flex-align: center; 
    align-items: center;  
} 

.zoom-pane img { 
    width: 100% !important; 
    vertical-align: top !important; 
}