不能滚动内容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

回答

相关问题