如何制作一个离子内容卷轴

How to make an Ionic content scroll

本文关键字：一个 何制作      更新时间：2023-09-26

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

我不能让内容可滚动，我没有添加任何东西，我就是无缘无故地不能滚动。

我刚开始一个新的页面，我正在动态填写一个列表，但我面临的问题是，我不能滚动

下面是我的完整代码: 

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

如果您在<ion-content><ion-content/>中动态添加内容添加内容后，需要在$ionicScrollDelegate上调用resize()

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

HTML: 

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

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

动态添加内容后直接调用reCalculateSize()。

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:工作CodePen

ref: Ion-scroll doc

我用这种方法解决了这个问题，我想它会对你有所帮助。

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>


#scroll-list{
height: 200px;

}

快乐编码…

ionic设置了这些CSS样式，这就是禁用滚动的原因:

body,html{overflow:hidden}
相关文章：