web-dev-qa-db-ja.com

さまざまなionicタブをスワイプする方法

ここに最初の投稿がありますが、これに関するいくつかのヘルプやアドバイスを本当にいただければ幸いです。

現在、ionicフレームワークを使用してプロジェクトを構築しており、機能バージョンを構築した後、タブ間をスワイプしてアプリの個別のセクションを表示できるようにすることにしました。

ionicが提供するタブテンプレートを使用してアプリを構築したため、各ページはion-nav-view要素を介して表示され、app.jsファイルで宣言された状態変更を介して呼び出されるテンプレートです（を参照）。未満）：

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.Apache.cordova.statusbar required
      StatusBar.styleLightContent();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  // setup an abstract state for the tabs directive
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',

      }
    }
  })

  .state('tab.notes', {
      url: '/notes',
      views: {
        'tab-notes': {
          templateUrl: 'templates/tab-notes.html',
          controller: 'noteController'
        }
      }
    })

  .state('tab.todos', {
    url: '/todos',
    views: {
      'tab-todos': {
        templateUrl: 'templates/tab-todos.html',
        controller: 'todoController'
      }
    }
  })

  .state('tab.doodles', {
    url: '/doodles',
    views: {
      'tab-doodles': {
        templateUrl: 'templates/tab-doodles.html',
      }
    }
  })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

});

私が知りたいのは;ユーザーが左右にスワイプして異なるページを切り替えることができるようにする方法はありますか？

それも可能ですか？もしそうなら、それは同様にスクロールする必要があるときである必要がありますか？

これで十分な詳細が得られることを願っています。そうでない場合は、できる限り多くの情報を提供させていただきます。聞いてくれてありがとう！

javascriptangularjsnavigationionic-frameworkionic
14
LewisJWright

はい、これは可能です。タブテンプレートをいじってみたところ、次の結果が得られました。

<ion-content on-swipe-right="goBack()" on-swipe-left="goForward()">

また、各コントローラーには、対応する機能が必要です。

.controller('MyCtrl', function ($scope, $ionicTabsDelegate) {

    $scope.goForward = function () {
        var selected = $ionicTabsDelegate.selectedIndex();
        if (selected != -1) {
            $ionicTabsDelegate.select(selected + 1);
        }
    }

    $scope.goBack = function () {
        var selected = $ionicTabsDelegate.selectedIndex();
        if (selected != -1 && selected != 0) {
            $ionicTabsDelegate.select(selected - 1);
        }
    }
})

これがベストプラクティスであり、非常に堅牢であるかどうかはわかりません。私が言ったように、私は docs を読んだ後、少し遊んだ。

私はあなたにそれがどのように機能するかについての考えを与えたことを望みます。

22
QueryLars