ionic-JS:Scroll（滚动）

作者: hx永恒之恋 | 来源:发表于2017-01-16 19:29 被阅读713次

ion-scroll

创建一个包含所有内容的可滚动容器。

用法

<ion-scroll 
  [delegate-handle=""] 
  [direction=""] 
  [paging=""] 
  [on-refresh=""] 
  [on-scroll=""] 
  [scrollbar-x=""] 
  [scrollbar-y=""] 
  [zooming=""] 
  [min-zoom=""] 
  [max-zoom=""]> 
... 
</ion-scroll>

API

属性	类型	详情
delegate-handle(可选)	字符串	该句柄利用$ionicScrollDelegate指定滚动视图。
direction(可选)	字符串	滚动的方向。 'x' 或 'y'。默认 'y'。
paging(可选)	布尔值	分页是否滚动。
on-refresh(可选)	表达式	调用下拉刷新，由ionRefresher触发。
on-scroll(可选)	表达式	当用户滚动时触发。
scrollbar-x(可选)	布尔值	是否显示水平滚动条。默认为false。
scrollbar-y(可选)	布尔值	是否显示垂直滚动条。默认为true。
zooming(可选)	布尔值	是否支持双指缩放。
min-zoom(可选)	整数	允许的最小缩放量（默认为0.5）
max-zoom(可选)	整数	允许的最大缩放量（默认为3）

ion-infinite-scroll

隶属于ionContent 或 ionScroll

当用户到达页脚或页脚附近时，ionInfiniteScroll指令允许你调用一个函数。
当用户滚动的距离超出底部的内容时，就会触发你指定的on-infinite。

用法

  <ion-content ng-controller="MyController"> 
    <ion-infinite-scroll 
      on-infinite="loadMore()" 
      distance="1%"> 
    </ion-infinite-scroll>
  </ion-content>

function MyController($scope, $http) { 
  $scope.items = []; 
  $scope.loadMore = function() { 
    $http.get('/more-items').success(function(items) { 
      useItems(items); 
      $scope.$broadcast('scroll.infiniteScrollComplete');
    }); 
  }; 

  $scope.$on('stateChangeSuccess', function() { 
    $scope.loadMore(); 
  });
}

当没有更多数据加载时，就可以用一个简单的方法阻止无限滚动，那就是angular的ng-if 指令:

<ion-infinite-scroll 
  ng-if="moreDataCanBeLoaded()" 
  icon="ion-loading-c" 
  on-infinite="loadMoreData()">
</ion-infinite-scroll>

API

属性	类型	详情
on-infinite	表达式	当滚动到底部时触发的时间。
distance(可选)	字符串	从底部滚动到触发on-infinite表达式的距离。默认: 1%。
icon(可选)	字符串	当加载时显示的图标。默认: 'ion-loading-d'。

$ionicScrollDelegate

授权控制滚动视图（通过ionContent
和 ionScroll
指令创建）。
该方法直接被$ionicScrollDelegate服务触发，来控制所有滚动视图。用 $getByHandle方法控制特定的滚动视图。

用法

  <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); 
  }
}

参数	类型	详情
id	字符串	保留已滚动位置的滚动视图的id。

forgetScrollPosition()

停止保存这个滚动视图的滚动位置。

scrollToRememberedPosition([shouldAnimate])

如果这个滚动视图有个和它的滚动位置关联的id（通过调用rememberScrollPosition方法），然后记住那个位置，加载那个位置然后滚动到那个位置。

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

$getByHandle(handle)

参数	类型	详情
handle	字符串

返回: delegateInstance一个代表性实例就是只控制带有delegate-handle
的滚动视图来匹配给定的句柄。

例如: $ionicScrollDelegate.$getByHandle('my-handle').scrollTop();

网友评论

ac025df10d24:不知道楼主有没遇到过这样的问题：https://github.com/driftyco/ionic/issues/10840
当xy都可以滚动时，而且有ion-infinite-scroll触发的方法。当水平向右滚动到最右端时会触发ion-infinite-scroll的getMoreData方法。

web前端工程师学院

本文标题：ionic-JS:Scroll（滚动）

本文链接：https://www.haomeiwen.com/subject/uqupbttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！