如何制作离子内容滚动 [英] How to make an Ionic content scroll
问题描述
这可能是一个愚蠢的问题，但这确实令人头痛。
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.
我刚开始一个新的页面，我正在动态填写一个列表，但我面临的问题是我可以't scroll
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
这是我的完整代码：
<!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
当您使用<$时c $ c> resize（）它会再次重新计算内容的大小，即会使您的< ion-content>< ion-content /> 可滚动。
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();
};
}
只需致电 reCalculateSize（）在动态添加内容后。
Just call reCalculateSize() after adding content dynamically.
这篇关于如何制作离子内容滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
