放大Cordova/Ionic中的特定div

我添加了具有允許縮放/縮放的屬性的視口。我添加了這些原生代碼：放大Cordova/Ionic中的特定div

WebSettings settings = super.appView.getSettings(); 
settings.setBuiltInZoomControls(true); 
settings.setDisplayZoomControls(true); 
settings.setSupportZoom(true);

我能夠放大，但我的觀點一起，ion-header-bar和ion-nav-bar被放大。我試着給頭css，以保持它的固定：

position: fixed; 
top: 0px; 
left: 0px;

但仍然，它會放大。

我的index.html有一個ion-header-bar，它包含一個圖像。模板進入

<ion-nav-view class="has-header"></ion-nav-view>

中，我在一個特定的div需要放大是有一個「離子view`模板，它看起來像：

<ion-view> 
    <ion-nav-bar class="bar-stable"> 
     <ion-nav-buttons side="right"> 
      icon1 
     </ion-nav-buttons> 
     <ion-nav-buttons side="left"> 
      icon2 
     </ion-nav-buttons> 
    </ion-nav-bar> 
    <div> 
     Multiple divs in here, which are containers for html and css data we receive via AJAX requests. And this is here I need zooming in. 
    </div> 
</ion-view>

PS：難道問題，如果我在ion-view內添加一個完整的HTML代碼（帶有元視口，沒有標題，但是正文和div）？

來源

2015-02-12 Keval

我想獲得類似的功能，並能夠使用ion-scroll使其工作。

<ion-scroll zooming="true" direction="xy" style="width: 100%; "> 
    <div></div> 
</ion-scroll>

來源

2015-02-17 16:31:10 Santiago

我的div的AJAX請求後，通過DOM修改。我嘗試在'ion-scroll'內添加這些div，但接收的數據不會加載，即離子滾動內的div保持空白。我嘗試在jQuery中添加離子滾動代碼，我在這裏修改div的HTML：'$（「＃container」）。html（'

' + data + '

'）;'和文檔加載，但然後我不能滾動。爲了確保我在HTML中添加了一些帶有文本的div，在離子滾動中，我可以放大該文本。 – Keval 2015-02-18 07:09:49

在1.2+，你必須添加這個問題，以及： '的.config（函數（$ ionicConfigProvider）{$ ionicConfigProvider.scrolling.jsScrolling（TRUE）;} ）' 通過https：//forum.ionicframework。 com/t/ionic-latest-version-1-7-14-pinch-zoom-is-not-working/42832 – jczaplew 2016-02-15 14:54:24

另一種解決辦法是使用hammerjs多點觸摸手勢和地圖掐了掐來放大使用CSS的內容。

事情是這樣的：

var hammerTime = new Hammer.Manager($('div.youWantToScale')[0], {touchAction: "pan-x pan-y"}); 
var pinch = new Hammer.Pinch(); 
var lastZoom; 
hammerTime.add(pinch); 
hammerTime.on("pinchout pinchin", function(e) { 
    var currentZoom = Number($('div.youWantToScale').css("zoom")); 
    if (lastZoom) { 
     var newZoom = currentZoom + (e.scale - lastZoom); 

     //bounds checking for your zoom, min=1 and max=3 here 
     newZoom = newZoom < 1 ? 1 : (newZoom > 3 ? 3 : newZoom); 
     $('div.youWantToScale').css("zoom", newZoom); 
    } 
    lastZoom = e.scale; 
}); 

hammerTime.on("pinchstart", function (e) { 
    //Seems clunky, but reset the lastZoom on a new pinch 
    lastZoom = undefined; 
});

來源

2015-03-11 14:00:58 laughingpine

我可以放大我想要的div，但現在我無法向下滾動。由於插件的原因，該應用在該頁面上面臨嚴重滯後。 – Keval 2015-03-11 14:35:31

嗯，或許嘗試添加'var pan = new Hammer.Pan（）'並將'hammerTime.add'調整爲'hammerTime.add（pinch，pan）'好像錘子可能會覆蓋正常的觸摸事件......嗯，還有，添加css：'overflow：scroll; -webkit-overflow-scrolling：touch;'help at all？ – laughingpine 2015-03-11 18:19:59

感謝您再次回覆，但沒有任何變化。仍然無法滾動。而且_heavy lag_仍然是一樣的 – Keval 2015-03-12 06:59:06

放大Cordova/Ionic中的特定div

回答

相關問題