如何通过不同的离子标签滑动

Question

有史以来的第一篇文章，但真的很感谢您的帮助或建议：

我目前正在使用离子框架构建一个项目，在构建功能版本后，我决定能够在选项卡之间刷新以显示应用程序的单独部分。

我使用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');
});

我想知道的是；有什么方法可以允许用户左右滑动以在不同页面之间切换？

甚至有可能吗？如果是这样，应该还需要滚动时吗？

我希望这已经足够细节，如果不是，我很乐意尽可能多地提供。感谢您的收听！

Answer 1

是的，这是可能的。我玩了Tabs模板，并得出以下结果：

<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);
        }
    }
})

我不知道这是否是最佳实践，而且非常强大。就像我说的那样，我在阅读文档后只是玩了一点。

我希望我对它的工作方式有所了解。