【发布时间】:2015-08-18 14:02:33
【问题描述】:
我正在制作一个简单的应用程序来记录我的工作时间。我正在开发适用于 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>
【问题讨论】:
-
在这里找到答案*.com/questions/37230979/…