ionic 滚动条

ion-scroll

ion-scroll 用于创建一个可滚动的容器。

用法

    ...

API

实例

HTML 代码

CSS 代码

body {
  cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;
}

Ja vaScript 代码

angular.module('ionicApp', ['ionic']);

ion-infinite-scroll

当用户到达页脚或页脚附近时，ionInfiniteScroll指令允许你调用一个函数 。

当用户滚动的距离超出底部的内容时，就会触发你指定的on-infinite。

用法

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

API

$ionicScrollDelegate

授权控制滚动视图（通过ion-content 和 ion-scroll指令创建）。

这个方法会由$ionicScrollDelegate服务直接调用，用来统一控制所有滚动视图；如果只想操作某一个指定的滚动视图，就需要通过$getByHandle方法来实现。

用法

  
    滚动到顶部!
  

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

方法

resize()

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

scrollTop([shouldAnimate])

scrollBottom([shouldAnimate])