Comment faire un Ioniques contenu de défilement

Cela peut être une question stupide, mais ce qui fait vraiment mal à la tête.

Je ne pouvais pas rendre le contenu de défilement, je n'ai pas ajouter anyhting, je ne peux pas faire défiler pour aucune raison.

J'ai juste un a commencé une nouvelle page et je suis le remplissage d'une liste de manière dynamique, mais le problème que je me pose, c'est que je ne peux pas faire défiler

Voici mon code complet :

HTML:

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

InformationsquelleAutor Yasser B. | 2015-05-20
  1. 6

    Si vous ajoutez du contenu de façon dynamique dans <ion-content><ion-content/>
    Vous devez appeler redimensionner() sur $ionicScrollDelegate après, le contenu est ajouté

    Lorsque vous utilisez resize() nouveau recalculer la taille du contenu c'est à dire fera de votre <ion-content><ion-content/> défilement.

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

    Appelez simplement reCalculateSize() après l'ajout de contenu dynamique.

    • Fonctionne très bien. Ce devrait être l'accepter réponse.
    InformationsquelleAutor Kashif ali
  2. 4

    Ionique fait une Directive pour faire un contenu de défilement
    Essayez ceci pour votre code suivant :

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

    Dans votre cas, vous avez à faire: 

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

    Si ion de défilement de la directive a un petit problème quand nous avons besoin de défilement verticale et horizontale. La seule solution que j'ai trouvé est de rendre le contenu plus petite que la hauteur de la page. Regardez les codePen :
    Travail CodePen

    ref: Ion de défilement de la doc

    • Merci pour votre réponse, mais ce n'est pas de travail !
    • Ce n'est pas de travail ? le défilement verticale, je suppose?
    • oui, le défilement vertical
    • essayez le réglage de la hauteur pour faire défiler je.e "<ion de défilement zoom="true" direction="y" style="height:500px">"
    • travaillé pour android , pas pour l'iphone
    • Salut tom, je peux vous aider avec cela, mais s'il vous plaît me donner plus de détails au sujet de votre environnement, à l'aide de simulateur réel ou iOS ? quelle est sa version ?
    • J'ai créé une question j'espère qu'il a suffisamment d'informations , laissez-moi savoir thx stackoverflow.com/questions/44578941/...

    InformationsquelleAutor carton
  3. -2

    ionique définit ces styles css, c'est la raison de défilement est désactivé:

    body,html{overflow:hidden}
    InformationsquelleAutor Pascalius