我的页面上有两个离子滚动元素,顶部有一个水平滚动,下面是一个应该垂直滚动的列表.
问题是它没有.它只是反弹到列表的顶部.
示例：http://codepen.io/CaffGeek/pen/LEVdVY
我发现如果我在垂直离子滚动上设置一个高度它“有效”,但这需要在多个设备上工作,我不知道要使用多少高度.我宁愿不必看事件,每次重新计算高度.有谁知道如何解决这个问题？
HTML
<html ng-app="ionicApp">
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Ionic List Scroll Bug</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<header class="bar bar-header bar-positive">
<h1 class="title">Ionic List Scroll Bug</h1>
</header>
<ion-content class="has-header">
<ion-scroll delegate-handle="calendarScroll" direction="x">
<div class="row">
<div class="col col-20" ng-repeat="day in payPeriod.days">
<div class="row">
<div class="col">{{day.name}}</div>
</div>
<div class="row">
<div class="col">{{day.number}}</div>
</div>
</div>
</div>
</ion-scroll>
<ion-scroll delegate-handle="taskScroll" direction="y">
<ul class="list">
<li class="list-item" ng-repeat="task in tasks">
<div class="row">
<div class="col col-80">
<p>{{task.name}}</p>
</div>
<div class="col col-20">
<label class="item item-input">
<input type="text" placeholder="Hours" ng-value="task.time" />
</label>
</div>
</div>
</li>
</ul>
</ion-scroll>
</ion-content>
<ion-footer-bar align-title="right" class="bar-stable">
<div class="buttons">
<button class="button">Save</button>
</div>
<h1 class="title">Total hours 0.00</h1>
</ion-footer-bar>
</body>
</html>
JavaScript的
angular.module('ionicApp',['ionic'])
.controller('MyCtrl',function($scope) {
$scope.payPeriod = {
days: [{ name: 'Mon',number: 3 },{ name: 'Tue',number: 4 },{ name: 'Wed',number: 5 },{ name: 'Thu',number: 6 },{ name: 'Fri',number: 7 },{ name: 'Sat',number: 8 },{ name: 'Sun',number: 9 }]
};
$scope.tasks = [
{name: 'task 1',time: 1.0 },{name: 'task 2',time: 3.0 },{name: 'task 3',time: 2.0 },{name: 'task 4',{name: 'task 5',{name: 'task 6',{name: 'task 7',{name: 'task 8',{name: 'task 9',{name: 'task 0',time: 1.0 }
];
});
解决方法
这是一个简单的解决方案：
Codepen illustrating a simple fix
这是我们正在做的事情：
ion-scroll[direction=x] {
width: 100vw;
}
ion-scroll[direction=y] {
height: 100vh;
}
这将允许您的卷轴在您的Ionic应用程序中按预期工作(事实上,这是我在我的工作中作为CSS样板的一部分).
GIF：对CodePen采取行动
