我的页面上有两个 ion-scroll 元素,上面的元素水平滚动,下面是一个应该垂直滚动的列表。
问题是它没有。它只是弹回到列表的顶部。
示例:http://codepen.io/CaffGeek/pen/LEVdVY
我发现,如果我在垂直 ionic 滚动上设置一个高度,它会“起作用”,但这需要在多个设备上起作用,而且我不知道要使用什么高度。我宁愿不必观看事件,也不必每次都重新计算高度。有人知道如何解决这个问题吗?
<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>
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 }
];
});
最佳答案
这是一个简单的解决方案:
这是我们正在做的事情的主要内容:
ion-scroll[direction=x] {
width: 100vw;
}
ion-scroll[direction=y] {
height: 100vh;
}
这将使您的滚动条在您的 Ionic 应用程序中按预期工作(事实上,这就是我在我的 CSS 样板文件中所做的)。
关于javascript - 垂直滚动在 Ionic 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27153528/
如果您尝试在Ruby中的nil对象上调用方法,则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而,有一个tryRails中的方法,如果它被发送到一个nil对象,它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常? 最佳答案 像Ruby中的所有其他对象
在Rails4.0.2中,我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常,但在生产环境中它会抛出如下错误,ActionView::Template::Error(noimplicitconversionofnilintoString)在View中,create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo
1.upto(9){|x|printx}为什么这行不通?{printx|x}}y呢? 最佳答案 它用于传递给您的block的参数。即在您的示例中,upto将使用1到9中的每个数字调用您的block,当前值可作为x获得。block参数可以有任何名称,就像方法参数一样。例如1.upto(9){|num|putsnum是有效的。就像一个方法的参数一样,一个block也可以有多个参数。例如hash.each_pair{|key,value|puts"#{key}is#{value}"} 关于ru
我目前正在尝试学习RubyonRails和测试框架RSpec。assigns在此RSpec测试中做什么?describe"GETindex"doit"assignsallmymodelas@mymodel"domymodel=Factory(:mymodel)get:indexassigns(:mymodels).shouldeq([mymodel])endend 最佳答案 assigns只是检查您在Controller中设置的实例变量的值。这里检查@mymodels。 关于ruby-o
我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
这段代码似乎创建了一个范围从a到z的数组,但我不明白*的作用。有人可以解释一下吗?[*"a".."z"] 最佳答案 它叫做splatoperator.SplattinganLvalueAmaximumofonelvaluemaybesplattedinwhichcaseitisassignedanArrayconsistingoftheremainingrvaluesthatlackcorrespondinglvalues.Iftherightmostlvalueissplattedthenitconsumesallrvaluesw
你能解释一下吗?我想评估来自两个不同来源的值和计算。一个消息来源为我提供了以下信息(以编程方式):'a=2'第二个来源给了我这个表达式来评估:'a+3'这个有效:a=2eval'a+3'这也有效:eval'a=2;a+3'但我真正需要的是这个,但它不起作用:eval'a=2'eval'a+3'我想了解其中的区别,以及如何使最后一个选项起作用。感谢您的帮助。 最佳答案 您可以创建一个Binding,并将相同的绑定(bind)与每个eval相关联调用:1.9.3p194:008>b=binding=>#1.9.3p194:009>eva
我无法运行Spring。这是错误日志。myid-no-MacBook-Pro:myid$spring/Users/myid/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/spring-0.0.10/lib/spring/sid.rb:17:in`fiddle_func':uninitializedconstantSpring::SID::DL(NameError)from/Users/myid/.rbenv/versions/1.9.3-p484/lib/ruby/gems/1.9.1/gems/spring-0.0.10/li
我有这个:AccountSummary我想单击该链接,但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan
我在RoR应用程序中有一个提交表单,是使用simple_form构建的。当字段为空白时,应用程序仍会继续下一步,而不会提示错误或警告。默认情况下,这些字段应该是required:true;但即使手动编写也行不通。该应用有3个步骤:NewPost(新View)->Preview(创建View)->Post。我的Controller和View的摘录会更清楚:defnew@post=Post.newenddefcreate@post=Post.new(params.require(:post).permit(:title,:category_id))ifparams[:previewButt