Question

这可能是一个愚蠢的问题，但这确实令人头疼。

我无法将内容滚动，我没有添加任何内容，我无法无缘无故地滚动。

我刚开始一个新页面并且我正在动态填充列表，但我面临的问题是我无法滚动

这是我的完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
     
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

     
    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">


      
      
      
   <ion-content>
<div ng-controller="customersCtrl"> 
<div class="list">
    <div ng-repeat="m in matches"  >
        
    <div class="item item-divider" >
    {{ m.competition }}
  </div>
  <a class="item" href="#" ng-repeat="s in matches" ng-if="m.competition == s.competition">
      
    {{ s.team1.name+' - '+s.team2.name }}
  </a>
    
    </div>

</div>
</div>
      </ion-content>


<script>
var app = angular.module('starter', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("http://int.footballclub.orange.com/ofc/matches?date=2015-05-20")
        .success(function (response) {
            $scope.matches = response;
            for (var i = 0; i < response.length; i++) {
                setName($scope.matches, i);
            }
        var Competitions = ["Kenya","Nigéria"];
        });

    var setName = function (matches, index) {
        $http.get("http://int.footballclub.orange.com/ofc/competitions/" + matches[index].idCompetition)
            .success(function (response) {
          matches[index].competition = response.name;
        
            });
    }


});
    


</script>

  </body>
</html>

Answer 1

如果要在<ion-content><ion-content/>中动态添加内容添加内容后，您需要在$ionicScrollDelegate上调用调整大小（）

当您使用resize()时，它会再次重新计算内容的大小，即会使您的<ion-content><ion-content/>可滚动。

<body ng-controller="MainCtrl">
    <ion-content delegate-handle="mainScroll">
    </ion-content>
</body>

var app = angular.module('starter', []);
app.controller('customersCtrl', function($scope, $http,$ionicScrollDelegate) {
    $scope.reCalculateSize= function() {
        $ionicScrollDelegate.$getByHandle('mainScroll').resize();
    };
}

在动态添加内容后立即致电reCalculateSize()。

Answer 2

Ionic制定了一项指令，使内容可滚动请尝试以下代码：

       <ion-scroll direction="xy" >
       // Your content scrollable 
      </ion-scroll>

在你的情况下你必须这样做：

<ion-content>
    <div ng-controller="customersCtrl"> 
        <ion-scroll direction="xy" >
             <div class="list">
                 <div ng-repeat="m in matches"  >
               <div class="item item-divider" >
                  {{ m.competition }}
               </div>
                <a class="item" href="#" ng-repeat="s in matches" ng-if="m.competition == s.competition">
                  {{ s.team1.name+' - '+s.team2.name }}
                </a>
             </div>
           </div>
        </ion-scroll>
      </div>
  </ion-content>

因此，当我们需要垂直和水平滚动时，离子滚动指令有一点问题。我找到的唯一解决方案是使内容小于页面高度。看看codePen： Working CodePen

参考：Ion-scroll doc

Answer 3

我以这种方式解决了这个问题，我认为它将为您提供帮助。

在html文件中：

<ion-content padding>
  <div scrollY="true" id="scroll-list">
    <ion-list *ngFor="let item of list">
      <ion-item>
       {{ item }}
      </ion-item>
    </ion-list>
  </div>

</ion-content>

在scss文件中：

#scroll-list{
height: 200px;

}

快乐的编码...

Answer 4

ionic设置这些css样式，这是滚动被禁用的原因：

body,html{overflow:hidden}

如何制作离子内容滚动

4 个答案: