$ionicScrollDelegate

作者:本站编辑发布时间:2015-11-24 来源:本站原创点击数:

用法

<body ng-controller="MainCtrl">   <ion-content>     <button ng-click="scrollTop()">滚动到顶部!</button>   </ion-content> </body>

function MainCtrl($scope, $ionicScrollDelegate) {   $scope.scrollTop = function() {     $ionicScrollDelegate.scrollTop();   }; }

高级用法的例子，用带有两个滚动区域的delegate-handle来特殊控制。

<body ng-controller="MainCtrl">   <ion-content delegate-handle="mainScroll">     <button ng-click="scrollMainToTop()">       滚动内容到顶部!     </button>     <ion-scroll delegate-handle="small" style="height: 100px;">       <button ng-click="scrollSmallToTop()">         滚动小区域到顶部!       </button>     </ion-scroll>   </ion-content> </body>

function MainCtrl($scope, $ionicScrollDelegate) {   $scope.scrollMainToTop = function() {     $ionicScrollDelegate.$getByHandle('mainScroll').scrollTop();   };   $scope.scrollSmallToTop = function() {     $ionicScrollDelegate.$getByHandle('small').scrollTop();   }; }

方法

`resize()`

告诉滚动视图重新计算它的容器大小。

`scrollTop([shouldAnimate])`

参数	类型	详情
shouldAnimate(可选)	`布尔值`	是否应用滚动动画。

`scrollBottom([shouldAnimate])`

参数	类型	详情
shouldAnimate(可选)	`布尔值`	是否应用滚动动画。

`scrollTo(left, top, [shouldAnimate])`

参数	类型	详情
left	`数值`	水平滚动的值。
top	`数值`	垂直滚动的值。
shouldAnimate(可选)	`布尔值`	是否应用滚动动画。

`scrollBy(left, top, [shouldAnimate])`

参数	类型	详情
left	`数值`	水平滚动的偏移量。
top	`数值`	垂直滚动的偏移量。
shouldAnimate(可选)	`布尔值`	是否应用滚动动画。

`getScrollPosition()`

返回: 对象 滚动到该视图的位置，具有一下属性：

{数值} left 从左侧到用户已滚动的距离(开始为 0)。
{数值} top 从顶部到用户已滚动的距离 (开始为 0)。

`anchorScroll([shouldAnimate])`

告诉滚动视图用一个带有id的滚动元素匹配window.location.hash。

如果没有匹配到元素，它会滚动到顶部。

参数	类型	详情
shouldAnimate(可选)	`布尔值`	是否应用滚动动画。

`getScrollView()`

返回: 对象 匹配具有授权的滚动视图。

`rememberScrollPosition(id)`

当滚动视图被销毁时（用户离开页面），页面最后的滚动位置会被指定的索引保存。

注意：根据一个ion-nav-view将页面和一个视图关联，rememberScrollPosition自动保存它们的滚动。

相关方法：scrollToRememberedPosition, forgetScrollPosition (低)。

在下面的例子中，ion-scroll元素的滚动位置会被保留，甚至当用户切换开关时。

<ion-toggle ng-model="shouldShowScrollView"></ion-toggle> <ion-scroll delegate-handle="myScroll" ng-if="shouldShowScrollView">   <div ng-controller="ScrollCtrl">     <ion-list>       <ion-item ng-repeat="i in items">{{i}}</ion-item>     </ion-list>   </div> </ion-scroll>

function ScrollCtrl($scope, $ionicScrollDelegate) {   var delegate = $ionicScrollDelegate.$getByHandle('myScroll');   // 这里可以放任何唯一的ID。重点是：要在每次重新创建控制器时   // 我们要加载当前记住的滚动值。   delegate.rememberScrollPosition('my-scroll-id');   delegate.scrollToRememberedPosition();   $scope.items = [];   for (var i=0; i<100; i++) {     $scope.items.push(i);   } }