如何制作离子内容滚动

Question

如何制作离子内容滚动

Yas*_* B. 3 javascript jquery angularjs ionic

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

我无法使内容可滚动,我没有添加任何内容,我无法无缘无故滚动.

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

这是我的完整代码:

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 6

如果要动态添加内容,则<ion-content><ion-content/> 需要在添加内容后调用resize()$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();
    };
}

Run Code Online (Sandbox Code Playgroud)

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

Answer 2

car*_*ton 4

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

Run Code Online (Sandbox Code Playgroud)

所以当我们需要垂直和水平滚动时，ion-scroll指令有一点问题。我找到的唯一解决方案是使内容小于页面高度。查看 codePen ：工作 CodePen

参考：离子滚动文档

归档时间：	10 年，3 月前
查看次数：	21613 次
最近记录：	9 年，3 月前