ionic 滾動(dòng)條

ion-scroll

ion-scroll 用于創(chuàng)建一個(gè)可滾動(dòng)的容器。

用法

<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指定滾動(dòng)視圖。
direction
(可選)
 字符串

滾動(dòng)的方向。 'x' 或 'y'。 默認(rèn) 'y'。
paging
(可選)
 布爾值

分頁(yè)是否滾動(dòng)。
on-refresh
(可選)
 表達(dá)式

調(diào)用下拉刷新， 由ionRefresher觸發(fā)。
on-scroll
(可選)
 表達(dá)式

當(dāng)用戶滾動(dòng)時(shí)觸發(fā)。
scrollbar-x
(可選)
 布爾值

是否顯示水平滾動(dòng)條。默認(rèn)為false。
scrollbar-y
(可選)
 布爾值

是否顯示垂直滾動(dòng)條。默認(rèn)為true。
zooming
(可選)
 布爾值

是否支持雙指縮放。
min-zoom
(可選)
 整數(shù)

允許的最小縮放量（默認(rèn)為0.5）
max-zoom
(可選)
 整數(shù)

允許的最大縮放量（默認(rèn)為3）

實(shí)例

HTML 代碼

<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
	<div style="width: 5000px; height: 5000px; background: url('//www.o2fo.com/try/demo_source/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>

CSS 代碼

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

JavaScript 代碼

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

嘗試一下 ?

ion-infinite-scroll

當(dāng)用戶到達(dá)頁(yè)腳或頁(yè)腳附近時(shí)，ionInfiniteScroll指令允許你調(diào)用一個(gè)函數(shù) 。

當(dāng)用戶滾動(dòng)的距離超出底部的內(nèi)容時(shí)，就會(huì)觸發(fā)你指定的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();
  });
}

當(dāng)沒(méi)有更多數(shù)據(jù)加載時(shí)，就可以用一個(gè)簡(jiǎn)單的方法阻止無(wú)限滾動(dòng)，那就是angular的ng-if 指令:

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

API

屬性 類型 詳情
on-infinite 表達(dá)式

當(dāng)滾動(dòng)到底部時(shí)觸發(fā)的事件。
distance
(可選)
 字符串

從底部滾動(dòng)到觸發(fā)on-infinite表達(dá)式的距離。默認(rèn): 1%。
icon
(可選)
 字符串

當(dāng)加載時(shí)顯示的圖標(biāo)。默認(rèn): 'ion-loading-d'。

$ionicScrollDelegate

授權(quán)控制滾動(dòng)視圖（通過(guò)ion-content 和 ion-scroll指令創(chuàng)建）。

該方法直接被$ionicScrollDelegate服務(wù)觸發(fā)，來(lái)控制所有滾動(dòng)視圖。用 $getByHandle方法控制特定的滾動(dòng)視圖。

用法

<body ng-controller="MainCtrl">
  <ion-content>
    <button ng-click="scrollTop()">滾動(dòng)到頂部!</button>
  </ion-content>
</body>

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

方法

resize()

告訴滾動(dòng)視圖重新計(jì)算它的容器大小。

scrollTop([shouldAnimate])
參數(shù) 類型 詳情
shouldAnimate
(可選)
 布爾值

是否應(yīng)用滾動(dòng)動(dòng)畫。

 
scrollBottom([shouldAnimate])
參數(shù) 類型 詳情
shouldAnimate
(可選)
 布爾值

是否應(yīng)用滾動(dòng)動(dòng)畫。