gpt4 book ai didi

javascript - 垂直滚动在 Ionic 中不起作用

转载 作者:可可西里 更新时间:2023-11-01 02:34:45 32 4
gpt4 key购买 nike

我的页面上有两个 ion-scroll 元素,上面的元素水平滚动,下面是一个应该垂直滚动的列表。

问题是它没有。它只是弹回到列表的顶部。

示例:http://codepen.io/CaffGeek/pen/LEVdVY

我发现,如果我在垂直 ionic 滚动上设置一个高度,它会“起作用”,但这需要在多个设备上起作用,而且我不知道要使用什么高度。我宁愿不必观看事件,也不必每次都重新计算高度。有人知道如何解决这个问题吗?

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', time: 1.0 },
{name: 'task 5', time: 2.0 },
{name: 'task 6', time: 1.0 },
{name: 'task 7', time: 1.0 },
{name: 'task 8', time: 2.0 },
{name: 'task 9', time: 1.0 },
{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 上运行

关于javascript - 垂直滚动在 Ionic 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27153528/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com