Question

我正在创建一个简单的应用程序来跟踪我的工作时间。我正在为Android开发应用程序，我遇到滚动问题。

应用程序的结构： 我有一个标题栏和一个页脚，它们都在< ion-content >标签之外，所以我不希望它是可滚动的。在< ion-content >内，我使用了< ion-side-menus >标签，最后在< ion-side-menu-content >标签中，我放入了< ion-nav-view >标签，该标签由我的州提供商控制。

一切正常，菜单可操作，视图根据设计变化。在我的一个观点中，我有一个超出大小的列表这里的问题开始了！。使用计算机时，我可以将页面拉下来（好像我正在尝试刷新它），但是当我尝试向下滚动页面时，直接进入列表的顶部，除非我继续拖动并且左手单击我的手指。此外，列表中的其余内容未加载。在我拖下来之前，列出的内容实际上被裁剪到停止的位置。当我将它导出到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>

Answer 1

您的update.html内容应包含在<ion-view>和<ion-content>元素中。

<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。

<ionic-content> / <ion-nav-view>不滚动

1 个答案: