草庐IT

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

coder 2024-05-15 原文

我的页面上有两个 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/

有关javascript - 垂直滚动在 Ionic 中不起作用的更多相关文章

  1. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象,为什么它会起作用? - 2

    如果您尝试在Ruby中的nil对象上调用方法,则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而,有一个tryRails中的方法,如果它被发送到一个nil对象,它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常? 最佳答案 像Ruby中的所有其他对象

  2. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在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

  3. ruby - 在 Ruby 中,垂直线是什么? - 2

    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

  4. ruby-on-rails - "assigns"在 Ruby on Rails 中有什么作用? - 2

    我目前正在尝试学习RubyonRails和测试框架RSpec。assigns在此RSpec测试中做什么?describe"GETindex"doit"assignsallmymodelas@mymodel"domymodel=Factory(:mymodel)get:indexassigns(:mymodels).shouldeq([mymodel])endend 最佳答案 assigns只是检查您在Controller中设置的实例变量的值。这里检查@mymodels。 关于ruby-o

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. ruby - 字符串文字前面的 * 在 ruby​​ 中有什么作用? - 2

    这段代码似乎创建了一个范围从a到z的数组,但我不明白*的作用。有人可以解释一下吗?[*"a".."z"] 最佳答案 它叫做splatoperator.SplattinganLvalueAmaximumofonelvaluemaybesplattedinwhichcaseitisassignedanArrayconsistingoftheremainingrvaluesthatlackcorrespondinglvalues.Iftherightmostlvalueissplattedthenitconsumesallrvaluesw

  7. ruby - 为什么这个 eval 在 Ruby 中不起作用 - 2

    你能解释一下吗?我想评估来自两个不同来源的值和计算。一个消息来源为我提供了以下信息(以编程方式):'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

  8. ruby-on-rails - Spring 不起作用。 [未初始化常量 Spring::SID::DL] - 2

    我无法运行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

  9. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个: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

  10. ruby-on-rails - Simple_form 必填字段不起作用 - Ruby on Rails - 2

    我在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

随机推荐