View Source Improve this doc

ons-pull-hook

ons-page要素以下でいわゆるpull to refreshを実装するためのコンポーネントです。

使い方 # 

<script>
  ons.bootstrap()

  .controller('MyController', function($scope, $timeout) {
    $scope.items = [3, 2 ,1];

    $scope.load = function($done) {
      $timeout(function() {
        $scope.items.unshift($scope.items.length + 1);
        $done();
      }, 1000);
    };
  });
</script>

<ons-page ng-controller="MyController">
  <ons-pull-hook var="loaded" ng-action="load($done)">
    <span ng-switch="loader.getCurrentState()">
      <span ng-switch-when="initial">Pull down to refresh</span>
      <span ng-switch-when="preaction">Release to refresh</span>
      <span ng-switch-when="action">Loading data. Please wait...</span>
    </span>
  </ons-pull-hook>
  <ons-list>
    <ons-list-item ng-repeat="item in items">
      Item #{{ item }}
    </ons-list-item>
  </ons-list>
</ons-page>

実例 #

See the Pen Alert, confirm and prompt dialogs by Onsen & Monaca (@onsen) on CodePen.

Open in New Window

関連情報 #

属性 #

名前 型 / デフォルト値 概要
var String このコンポーネントを参照するための名前を指定します。 Optional
disabled この属性がある時、disabled状態になりアクションが実行されなくなります Optional
ng-action Expression pull downしたときの振る舞いを指定します。アクションが完了した時には$done関数を呼び出します。 Optional
on-action Expression ng-actionと同じですが、AngularJS無しで利用する場合に利用できます。アクションが完了した時にはdone関数を呼び出します。 Optional
height String コンポーネントの高さを指定します。この高さ以上にpull downすると"preaction"状態に移行します。デフォルトの値は"64px"です。 Optional
threshold-height String 閾値となる高さを指定します。この値で指定した高さよりもpull downすると、このコンポーネントは自動的に"action"状態に移行します。 Optional
ons-changestate Expression "changestate"イベントが発火された時の挙動を独自に指定できます。 Optional

メソッド概要 #

シグネチャ 概要
setDisabled(disabled) disabled状態にするかどうかを設定できます。
isDisabled() dsiabled状態になっているかを得ることが出来ます。
setHeight(height) 高さを指定できます。
setThresholdHeight(thresholdHeight) 閾値となる高さを指定できます。
on(eventName, listener) イベントリスナーを追加します。
once(eventName, listener) 一度だけ呼び出されるイベントリスナーを追加します。
off(eventName, [listener]) イベントリスナーを削除します。もしイベントリスナーを指定しなかった場合には、そのイベントに紐づく全てのイベントリスナーが削除されます。

イベント概要 #

名前 概要
changestate コンポーネントの状態が変わった場合に発火します。状態は、"initial", "preaction", "action"のいずれかです。

メソッド

setDisabled(disabled) #

disabled状態にするかどうかを設定できます。

パラメーター
名前 型 概要
disabled Boolean trueを指定すると、プルフックがdisabled状態になります。

isDisabled(): Boolean #

dsiabled状態になっているかを得ることが出来ます。

返り値: プルフックがdisabled状態の場合、trueを返します。

setHeight(height) #

高さを指定できます。

パラメーター
名前 型 概要
height Number 要素の高さを指定します。

setThresholdHeight(thresholdHeight) #

閾値となる高さを指定できます。

パラメーター
名前 型 概要
thresholdHeight Number プルフックのアクションを起こす閾値となる高さを指定します。

on(eventName, listener) #

イベントリスナーを追加します。

パラメーター
名前 型 概要
eventName String イベント名を指定します。
listener Function このイベントが発火された際に呼び出される関数オブジェクトを指定します。

once(eventName, listener) #

一度だけ呼び出されるイベントリスナーを追加します。

パラメーター
名前 型 概要
eventName String イベント名を指定します。
listener Function イベントが発火した際に呼び出される関数オブジェクトを指定します。

off(eventName, [listener]) #

イベントリスナーを削除します。もしイベントリスナーを指定しなかった場合には、そのイベントに紐づく全てのイベントリスナーが削除されます。

パラメーター
名前 型 概要
eventName String イベント名を指定します。
listener Function 削除するイベントリスナーを指定します。

イベント

changestate #

コンポーネントの状態が変わった場合に発火します。状態は、"initial", "preaction", "action"のいずれかです。

パラメーター
名前 型 概要
event Object イベントオブジェクト。
event.pullHook Object コンポーネントのオブジェクト。
event.state String 現在の状態名を参照できます。

議論 #