滾動視圖不滾動與表面fa大小[undefined，true]

我有一個scroll-view有一個fa-surface包含我的網頁的html。這個「fa-surface」的高度是動態的，因爲它可以更大或更小，這取決於頁面的寬度。滾動視圖不滾動與表面fa大小[undefined，true]

我已將fa-modifier大小設置爲fa-size=[undefined, true]（請閱讀，將高度設置爲表面高度）。

這會導致不會滾動的頁面。如果我在fa-size中放置了一個固定的高度，它會起作用，但是這樣做對我來說並不好，因爲頁面響應迅速，高度動態。

下面是頁面的代碼：

<fa-app style="height:100%"> 
    <fa-scroll-view fa-pipe-from="eventHandler"> 
    <fa-view> 
     <fa-modifier fa-size="[undefined, true]"> 
     <fa-surface fa-pipe-to="eventHandler"> 
      Misc HTML... 
     </fa-surface> 
     </fa-modifier> 
    </fa-view> 
    </fa-scroll-view> 
</fa-app>

下面是用於輸送事件的簡單控制器。

angular.module('newvitalwallApp') 
.controller('MainCtrl', function ($scope, $famous) { 
    var EventHandler = $famous['famous/core/EventHandler']; 
    $scope.eventHandler = new EventHandler(); 
});

活頁是開發服務器放在這裏，如果你好奇它是如何表現：

http://staging-sqtmp3dxdz.elasticbeanstalk.com/

我很茫然，爲什麼這是行不通的。我是新到着名的，但我已經搜索了互聯網尋找答案，並發現很少。

在此先感謝您的意見。

來源

2014-10-18 bennewton999

我剛剛創建了一個服務，它將臨時處理true的寬度和高度，但也會在f/a問題跟蹤器中記錄問題，希望團隊能夠解決問題。

 var faTrueService = function($famous){ 

     this.height = function(cl){ 
      if($famous.find(cl)[0].renderNode._currentTarget !== null && $famous.find(cl)[0].renderNode._currentTarget.children[0] !== undefined){ 
       return $famous.find(cl)[0].renderNode._currentTarget.children[0].clientHeight; 
      } 
     }; 

     this.width = function(cl){ 
      if($famous.find(cl)[0].renderNode._currentTarget !== null && $famous.find(cl)[0].renderNode._currentTarget.children[0] !== undefined){ 
       return $famous.find(cl)[0].renderNode._currentTarget.children[0].clientWidth; 
      } 
     }; 

     };

在模板中，你現在可以做到以下幾點：

<fa-modifier fa-size="[undefined, faTrue.height('.item-1')]"> 
    <fa-view fa-index="1"> 
     <fa-surface class="item-1" fa-pipe-to="pageScrollHandler">

當表面得到部署，resize事件被連接到他們，迫使表面重新評估它的大小，所以服務將自動調用調整大小。

由於您不能在模板中使用服務，因此我創建了一個幫助函數，用於在我正在使用的當前控制器或指令範圍上調用服務。

  //temp fix for true 
      $scope.faTrue = { 
       height : function(cl){ 
       return faTrue.height(cl); 
       }, 
       width : function(cl){ 
       return faTrue.width(cl); 
       } 
      };

孩子。FA-面作爲目標可能需要得到以下造型這個工作：

.fa-surface{ 
    overflow:hidden; 
    height:auto; 
    width:auto; 
}

我不明白，爲什麼以前的答案用來同步回調，這是沒有意義的，尤其是因爲大小正在重新評估Surfaces的大小，而不是附加到scrollview的事件。

由於Scrollview的所有孩子現在都有身高，所以它會自動調整它的高度以及Famo.us 0.3.0

來源

2014-10-23 18:01:56 codescholar

謝謝。這是有道理的，不幸的是我暫時無法測試它。我使用了同步功能，因爲我專門嘗試滾動頁面，所以它是我使用的邏輯觸發器。我修好了它，但我確信有更好的辦法。 – bennewton999 2014-10-23 18:20:49

這個效果很好。唯一的，我不得不添加額外的'''$ famous.find（cl）[0]'''檢查，因爲我有兩個不同類型的表面類型和不同的類名稱。 – pasine 2014-10-24 12:17:20

所以，儘管我確實認爲將fa-modifier的大小設置爲[undefined,true]應該足以設置滾動內容的高度，但這還不夠。

因此，我添加了檢查滾動內容的高度並動態更新fa大小的函數。下面是我加的是原來的控制器代碼：

$scope.$on('$viewContentLoaded', function(){ 
    $famous.find('fa-scroll-view')[0].renderNode.sync.on('start', function(event) { 
    var test = angular.element(document.querySelector('#test')); 
    $scope.testHeight = test[0].clientHeight; 
    }); 
}); 

$scope.getTestHeight = function() { 
    return $scope.testHeight; 
}

然後，我的觀點改變了fa-size到[undefined, getTestHeight()]

有很好可能是這樣做的更好的方式，最終我認爲它應該被處理自動着名，但現在這解決了它。

來源

2014-10-19 16:36:17 bennewton999

滾動視圖不滾動與表面fa大小[undefined，true]

回答

相關問題