不能滾動內容Onsen UI/AngularJS

我剛剛開始使用AngularJS，我試圖讓我的頭靠近它。我似乎從jQuery中汲取了很多不良習慣。我有一個使用Onsen UI/AngularJS和jQuery編寫的簡單移動頁面。我想要的內容正確顯示，但我無法滾動內容到最後。我對網頁HTML代碼如下不能滾動內容Onsen UI/AngularJS

<ons-navigator title="Navigator" var="appNavigator"> 
    <ons-page> 
     <ons-toolbar> 
      <div class="left"> 
       <ons-button style="background-color: white;color: #d00052;" 
          ng-click="appNavigator.resetToPage('home.html', options);"><i class="fa fa-home fa-2"></i> 
       </ons-button> 
      </div> 
      <div class="center">Notice Board</div> 
      <div class="right"> 
       <ons-button style="background-color: white;color: #d00052;" 
          ng-click="appNavigator.resetToPage('login.html', options);"><i 
         class="fa fa-power-off fa-2"></i></ons-button> 
      </div> 
     </ons-toolbar> 
<ons-scoller> 
     <ons-list ng-controller="MyCtrl"> 
      <div ng-repeat="group in groups" style="z-index: 9999;"> 
       <ons-list-item ng-click="toggleGroup(group)" class="title" ng-class="{active:isGroupShown(group)}"> 
        <ons-icon icon="minus-square-o" ng-if="isGroupShown(group)"></ons-icon> 
        <ons-icon icon="plus-square-o" ng-if="!isGroupShown(group)"></ons-icon> 
        <b>{{group.title}}</b> 
       </ons-list-item> 
       <ons-list-item class="item-accordion" ng-show="isGroupShown(group)"> 
        <p style="line-height: 22px;" ng-bind-html="group.content">...</p> 
       </ons-list-item> 
      </div> 
     </ons-list> 
</ons-scoller> 
    </ons-page> 
</ons-navigator>

我給這頁控制器如下

app.controller('MyCtrl', function($scope) { 
    $scope.groups = []; 
    $.ajax({ 
     type: 'GET', 
     url: 'https://mywebsite/service?mode=data', 
     dataType: 'jsonp', 
     timeout: 5000, 
     success: function(data) { 
      $scope.groups = data; 
      $scope.$apply(); 
     }, 
     error: function(data) { 
      $scope.error = true; 
      $scope.$apply(); 
     } 
    }); 



    $scope.toggleGroup = function(group) { 
     if ($scope.isGroupShown(group)) { 
      $scope.shownGroup = null; 
     } else { 
      $scope.shownGroup = group; 
     } 
    }; 
    $scope.isGroupShown = function(group) { 
     return $scope.shownGroup === group; 
    }; 

});

我想，這是因爲HTML代碼使用插件，滾動的 - 它會正常滾動（上一個iPhone），但它不。我使用PhoneGap Build 3.5.0編譯應用程序。我在這裏錯過了什麼？我會非常感謝任何建議或指導。

來源

2014-09-28 Alex

的（ONS-scoller）是否有與它如溢出有關的任何CSS？ - http://www.w3schools.com/cssref/pr_pos_overflow.asp – Tasos 2014-09-28 02:09:17

不 - 沒有額外的CSS已被添加，除了什麼是包含在溫泉用戶界面CSS – Alex 2014-09-28 13:04:02

奇怪的是，它聽起來像一些在CSS有（位置：固定），它會停止滾動，除非實際的堵塞本身有問題。 – Tasos 2014-09-28 15:56:03

您可能只是有一個錯字。從<ons-scoller>...<ons-scoller>

更改爲<ons-scroller>...<ons-scroller>

來源

2015-11-17 12:38:31

不能滾動內容Onsen UI/AngularJS

回答

相關問題