How to make an Ionic content scroll

2019-05-21 02:36发布

站内问答 / JavaScript
913 3 4

This might be a stupid a question, but this really makes headache.

I couldn't make the content scrollable, I didn't add anyhting, I just can't scroll for no reason.

I just a started a new page and i'm filling a list dynamically, but the problem i'm facing is that I can't scroll

Here is my full code :

<!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>

3条回答
Deceive 欺骗
2楼-- · 2019-05-21 03:26

ionic sets these css styles, that's the reason scrolling is disabled:

body,html{overflow:hidden}
查看更多
0人赞 添加讨论(0) 举报
Root（大扎）
3楼-- · 2019-05-21 03:27

Ionic made a Directive to make a content scrollable Try this to your following code :

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

In your case you have to do: 

<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>

So ion-scroll directive has a little problem when we need to vertical and horizontal scroll. The only solution that i found is to make the content smaller than the page height. Look at the codePen : Working CodePen

ref: Ion-scroll doc

查看更多
0人赞 添加讨论(0) 举报
来，给爷笑一个
4楼-- · 2019-05-21 03:30

If you are adding content dynamically in <ion-content><ion-content/> You need to call resize() on $ionicScrollDelegate after the content is added

When you use resize() it again recalculate the size of content i.e. will make your <ion-content><ion-content/> scrollable.

<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();
    };
}

Just call reCalculateSize() after adding content dynamically.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)