Javascript 如何使 Ionic 内容滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30351672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make an Ionic content scroll
提问by Yasser B.
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.
我无法使内容可滚动，我没有添加任何内容，我只是无缘无故地无法滚动。
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
我刚开始一个新页面，我正在动态填充列表，但我面临的问题是我无法滚动
Here is my full code :
这是我的完整代码：
<!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>回答by Kashif ali
If you are adding content dynamically in <ion-content><ion-content/>You need to call resize() on $ionicScrollDelegateafter the content is added
如果是动态添加内容，<ion-content><ion-content/>需要在添加内容后调用resize()$ionicScrollDelegate
When you use resize()it again recalculate the size of content i.e. will make your <ion-content><ion-content/>scrollable.
当您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();
};
}
Just call reCalculateSize()after adding content dynamically.
reCalculateSize()动态添加内容后调用即可。
回答by carton
Ionic made a Directive to make a content scrollable Try this to your following code :
Ionic 制定了一个指令，使内容可滚动 尝试使用以下代码：
<ion-scroll direction="xy" >
// Your content scrollable
</ion-scroll>
In your case you have to do:
在您的情况下，您必须执行以下操作：
<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>
So ion-scroll directive has a little problem when we need to vertical and horizontal scroll. The only solution that i found is to make the content smaller than the page height. Look at the codePen : Working CodePen
所以当我们需要垂直和水平滚动时， ion-scroll 指令有一个小问题。我发现的唯一解决方案是使内容小于页面高度。看看 codePen ： 工作 CodePen
ref: Ion-scroll doc
参考：离子滚动文档
回答by Maksudul Hasan Raju
I solved this problem in this way, I think it will help you.
我用这种方式解决了这个问题，我想它会对你有所帮助。
In html file:
在 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>
In scss file:
在 scss 文件中：
#scroll-list{
height: 200px;
}
}
happy coding...
快乐编码...
回答by Pascalius
ionic sets these css styles, that's the reason scrolling is disabled:
ionic 设置这些 css 样式，这就是禁用滚动的原因：
body,html{overflow:hidden}
