我目前正在我的移动应用程序中使用$ ionicScrollDelegate . 我的目标是当用户点击 Headers 栏时,它会自动滚动到顶部 . 我现在的问题是当我在我的代码中包含离子侧菜单时,$ ionicScrollDelegate无法向后滚动,我创建了一个按钮它返回它们的位置,但不能向后滚动 . 我试图找出为什么$ ionicScrollDelegate在我包含侧面菜单时无法滚动回顶部但是当我删除侧面菜单时,$ ionicScrollDelegate似乎工作正常并且它可以滚动回顶部 .
工作代码 - 没有离子侧菜单
<ion-view>
<ion-header-bar class="bar-positive">
<button class="button button-icon" ng-click="toggleLeft()" menu-toggle="left">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Details </h1>
</ion-header-bar>
<ion-content delegate-handle="mainContent" ng-controller="detailCtrl">
<a href="#" ng-click="loadMore(data)">Load More</a>
<ion-list can-swipe="listCanSwipe">
<ion-item ng-repeat="data in tempData |limitTo: limit"
item="data"
href="#/expenseDetail/{{data.id}}"
class="item-remove-animate">
Date:{{data.modifiedDate | date: "yyyy-MM-dd"}}
<ion-option-button class="button-assertive"
ng-click="showPopup(data)">
Delete
</ion-option-button>
<ion-option-button class="button-calm"
ng-click="edit(data)"
ng-disabled="data.status!= 'Draft'">
Edit
</ion-option-button>
</ion-item>
</ion-list>
<button class="button button-icon ion-android-arrow-up" ng-click="scrollListToTop()">Scroll Top</button>
</ion-content>
<ion-view>
不工作 - 有侧面菜单
<ion-view>
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<button class="button button-icon" ng-click="toggleLeft()" menu-toggle="left">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Expenses Details</h1>
<a class="button button-icon ion-plus-round" href="#/addExpensesForm"></a>
</ion-header-bar>
<ion-content delegate-handle="mainContent" ng-controller="detailCtrl">
<a href="#" ng-click="loadMore(data)">Load More</a>
<ion-list can-swipe="listCanSwipe">
<ion-item ng-repeat="data in tempData |limitTo: limit"
item="data"
href="#/expenseDetail/{{data.id}}"
class="item-remove-animate">
Date:{{data.modifiedDate | date: "yyyy-MM-dd"}}
<ion-option-button class="button-assertive"
ng-click="showPopup(data)">
Delete
</ion-option-button>
<ion-option-button class="button-calm"
ng-click="edit(data)"
ng-disabled="data.status!= 'Draft'">
Edit
</ion-option-button>
</ion-item>
</ion-list>
<button class="button button-icon ion-android-arrow-up" ng-click="scrollListToTop()">Scroll Top</button>
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<h1 class="title">Menu</h1>
</header>
<ion-list>
<ul class="list">
<a ui-sref="tabs.home" class="item">Home</a>
<a ui-sref="about" class="item">About</a>
<a ui-sref="tabs.setting" class="item">Settings</a>
</ul>
</ion-side-menu>
</ion-side-menus>
</ion-view>
在我的控制器中,我有
$scope.scrollListToTop = function () {
var result = $ionicScrollDelegate.$getByHandle('mainContent').getScrollPosition();
alert('Result:' + result.top + " " + result.left);
//$ionicScrollDelegate._instances[2].scrollTop();
}
1 回答
它可能与您的标记结构有关 .
以下两个链接都表明
ion-side-menu-content
应该包含ion-nav-bar
然后ion-nav-view
https://github.com/driftyco/ionic-starter-sidemenu/blob/master/templates/menu.html和http://mcgivery.com/understanding-ionics-side-menu/
切换它并将你的离子含量放在那里可能会让你重新控制 .
如果没有,请给我们一个codepen或类似的东西 .