【问题标题】:<ionic-content> / <ion-nav-view> not scrolling<ionic-content> / <ion-nav-view> 不滚动
【发布时间】:2015-08-18 14:02:33
【问题描述】:

我正在制作一个简单的应用程序来记录我的工作时间。我正在开发适用于 android 的应用程序,但滚动出现问题。

应用结构: 我有一个标题栏和一个页脚,它们都在&lt; ion-content &gt; 选项卡之外,所以我不希望它可以滚动。在&lt; ion-content &gt; 中,我使用了&lt; ion-side-menus &gt; 选项卡,最后在&lt; ion-side-menu-content &gt; 选项卡中我放入了由我的状态提供者控制的&lt; ion-nav-view &gt; 选项卡。

一切正常,菜单正常运行,视图根据设计而变化。在我的一个观点中,我有一个超出大小的列表问题从这里开始!。使用计算机时,我可以将页面下拉(就像我试图刷新它一样),但是当我尝试向下滚动时,页面会直接进入列表顶部,除非我继续拖动并用手指点击左键.此外,不会加载列表中的其余内容。列出的字面意思是在我拖下之前被裁剪到它停止的位置。当我将其导出到 Android 应用程序时,我什至无法拖动滚动。滚动实际上是不起作用的。

我附上了一些代码

var app = angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if (window.cordova && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if (window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: "views/home.html",
        controller: "MainController"
      })
      .state('rotas', {
        url: '/rotas',
        templateUrl: "views/rotas.html",
        controller: "MainController"
      })
      .state('update', {
        url: '/update',
        templateUrl: "views/update.html",
        controller: "UpdateController"
      });
    $urlRouterProvider.otherwise('/');
  });
.scroll {
  height: 100%;
}
/* Before i put in this CSS element, the content in the view was cropped SIGNIFICANTLY. not sure exactly what it does but it solved my problem. All other CSS elements are colour changes*/
index.html

<html>

<head>...</head>

<body ng-app="starter" ng-controller="MainController">

  <ion-pane>
    <ion-header-bar class="bar-stable">
      <!--header bar -->
      <h1 class="title">Shiftwiz.{{controllerCheck}}</h1>
    </ion-header-bar>
    <div class="bar bar-footer bar-stable">
      <!--footer-->
      <table id="footer-table">
        <tr>
          <td>
            <a ui-sref="rotas" ng-click="activity.doRotas()">
              <div>Rotas</div>
            </a>
          </td>
          <td>
            <a ui-sref="update" ng-click="activity.doUpdate()">
              <div>Update</div>
            </a>
          </td>
        </tr>
      </table>
    </div>
    <ion-content>
      <ion-side-menus>
        <ion-side-menu-content overflow-scroll="true">
          <!--menu-->
          <button class="button button-full button-positive" ng-click="toggleLeft()">
            Rotas: {{activity.rotas}} Update: {{activity.update}}
          </button>
          <ion-nav-view overflow-scroll="true"></ion-nav-view>
        </ion-side-menu-content>
        <ion-side-menu side="left">
          <ion-item>Next Week</ion-item>
          <ion-item ng-click="toggleLeft(); activity.chooseThisWeek(); calcDates()">This Week</ion-item>
          <div id="further-weeks" ng-show="activity.rotas">
            <ion-item>Last Week</ion-item>
            <ion-item>Last Two</ion-item>
            <ion-item>Last Three</ion-item>
          </div>
        </ion-side-menu>
      </ion-side-menus>

    </ion-content>
  </ion-pane>
</body>

</html>


update.html
<!-- this view contains the list which isn't rendering-->

<div class="card" ng-repeat="day in unPublishedRota">
  <a ng-click="day.toggleState()">
    <div class="item item-divider">
      <p class="day">{{ day.date | date:"EEEE" }}
        <br />{{day.date | date:"d, MMM y"}}</p>
      <p class="times">{{day.start}} | {{day.finish}}
        <br />{{day.hours}} hrs</p>
    </div>
  </a>

【问题讨论】:

标签: ionic vertical-scrolling


【解决方案1】:

您的update.html 内容应包含在&lt;ion-view&gt;&lt;ion-content&gt; 元素中。

<ion-view>
  <ion-content>    
    <div class="card" ng-repeat="day in unPublishedRota">
      <a ng-click="day.toggleState()">
        <div class="item item-divider">
          <p class="day">{{ day.date | date:"EEEE" }}
            <br />{{day.date | date:"d, MMM y"}}</p>
          <p class="times">{{day.start}} | {{day.finish}}
            <br />{{day.hours}} hrs</p>
        </div>
      </a>
    </div>
  </ion-content>
</ion-view>

您还可以查看 Ionic 的工作 sidemenu example

【讨论】:

  • 谢谢,现在滚动工作正常。但是现在我有另一个问题。它渲染除了最后一张卡片之外的所有内容。我仍然需要拖动它才能看到星期六...:/
  • 我找到了解决问题的方法。我使用 CSS 来调整 选项卡的高度。感谢您的帮助
  • 其实问题依然存在。它到达了底部,但它仍然砍掉了最后一张牌的一半
  • 您可以尝试将has-header 类添加到&lt;ion-content&gt; - 在很多情况下,当部分内容被覆盖时会有所帮助。