如何制作离子内容滚动

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

我无法使内容可滚动，我没有添加任何内容，我只是无法无缘无故滚动。

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

这是我的完整代码：

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above  -->          
 
 
 
 {{ m.competition }} 
  {{ s.team1.name+' - '+s.team2.name }}  
 
 
   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; }); } });    

Answer 1

如果要在动态添加内容，则需要在添加内容后调用$ionicScrollDelegate上的resize（ ）

当你使用resize()它会再次重新计算内容的大小，即会使你的可滚动。

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

只需动态添加内容即可调用reCalculateSize() 。

Answer 2

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

   // Your content scrollable  

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

  
  
 
 
 {{ m.competition }} 
  {{ s.team1.name+' - '+s.team2.name }}  
 
  
  

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

参考： 离子滚动文档

Answer 3

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

 body,html{overflow:hidden}