技術

【ionic】タブをタップで最上部にスクロール!

投稿日:2015年11月26日 更新日:

どうも、中田です。

今日はタブをタップでトップにゴーの日です。

どういう日かというと、
Facebooアプリとかはタブをタップするとその画面の最上部に移動しますよね。
それをionicアプリでやろうという日です。

ionicで標準タブアプリを作成すると、タブタップはナビゲーションのトップに戻る動きになり、
その画面の最上部に移動する動きにはなりません。

ちなみにナビゲーションのトップと言っているのは、
画面遷移してナビゲーションバーにバックボタンがある画面で、
バックボタンで戻りきった画面、要はタブの初期画面のことを言ってます。

処理の流れとしては、
まずナビゲーションのトップ画面かどうかの判定をします。

  • ナビゲーションのトップ画面の場合
    画面のscrollDelegateを利用してトップにスクロール
  • ナビゲーションのトップ画面でない場合
    クリックイベントを独自処理せずに本来のタブタップとして扱う

というものです。

実際のソースコードはこんな感じ。

<ion-tabs class="tabs-icon-top">

  <!-- Timeline Tab -->
  <ion-tab
    id="tab_timeline"
    title="タイムライン"
    icon="icon-home"
    href="#/tab/timeline"
    ng-click="tab_tap(0, 'tab.timeline')">
    <ion-nav-view name="tab-timeline"></ion-nav-view>
  </ion-tab>

  <!-- Search Tab -->
  <ion-tab
    id="tab_search"
    title="検索"
    icon="icon-search"
    href="#/tab/search"
    ng-click="tab_tap(1, 'tab.search')">
    <ion-nav-view name="tab-search"></ion-nav-view>
  </ion-tab>

  ...(略)

</ion-tabs>

各タブにng-clickを設定しています。
第一引数はタブのindex、第二引数はstate情報です。

angular.module('controllers.tab', [])
.controller('TabCtrl',
  [
    '$scope',
    '$state',
    '$ionicTabsDelegate',
    '$ionicScrollDelegate',
  function(
    $scope,
    $state,
    $ionicTabsDelegate,
    $ionicScrollDelegate) {

  $scope.tab_tap = function(tab_index, selected_tab) {
    if ($state.current.name == selected_tab) {
      // タブトップ→最上部へスクロール
      $ionicScrollDelegate.$getByHandle('content').scrollTop(true);
    } else {
      // タブトップではない→タブをタップしたことを強制的に実現
      $ionicTabsDelegate.select(tab_index);
    }
  }

  ...(略)

tab_tap関数での処理は、
第二引数のstateが今開いている画面のstateと比較して、
タブのトップかどうかを判定しています。

ちなみにタイムラインタブと検索タブのあるアプリの例ですが、
各画面のhtmlにはdelegate-handleを設定しています。

<ion-content delegate-handle="content">

今日はこんな日でした。

-技術
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

[ Ionic ]Cannot find module ‘../node_modules/xml2js’ でVRプラグインを消せない!

こんにちは。たなかです。 Ionicでandroidをbuild中、下記のような …

no image

[Angular]複数のクエリパラメータを設定する

こんばんは angularで複数のクエリパラメータを設定したいと思います。 co …

no image

[Angular] リアクティブフォームの値をtsファイルで設定する。

こんにちは、コーテッグの小山です。 Angularのリアクティブフォームについて …

[Xcode] SDK Version Issue – This app was built with the iOS 12.0 SDK. Starting March 2019, all iOS apps submitted to the App Store must be built with the iOS 12.1 SDK or later, included in Xcode 10.1 or later.

こんにちは。たなかです。 2019年、ブログ初更新になります。今年もよろしくお願 …

no image

[Angular]リアクティブフォームの頻出クラスと定義について

Angularのチュートリアルでは、フォームはngModelで双方向バインドでき …