javascript 如何在不同的离子标签之间滑动

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30307162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 12:01:15  来源:igfitidea点击:

How to swipe through different ionic tabs

javascriptangularjsnavigationionic-frameworkionic

提问by LewisJWright

first post ever here but would really appreciate some help or advice on this:

有史以来的第一篇文章,但非常感谢您对此的一些帮助或建议:

I am currently building a project using the ionic framework and after building a functional version I decided that having the ability to swipe between tabs to show the separate sections of the app.

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

I built the app using the tab template that ionic offers so each page is shown through the ion-nav-view element and is a template called through state changes declared in the app.js file (see below):

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

});

What I want to know is; Is there a way I can allow the user to swipe left and right to switch between the different pages?

我想知道的是;有没有一种方法可以让用户左右滑动以在不同页面之间切换?

Is it even possible? If so, should it be when there is a need to scroll as well?

甚至有可能吗?如果是这样,是否也应该在需要滚动时使用?

I hope this is enough detail, if not I would be happy to provide as much as I can. Thanks for listening!

我希望这是足够的细节,如果不是,我很乐意提供尽可能多的信息。感谢收听!

回答by LarsBauer

Yes, this is possible. I played around with the tabs template and came to the following result:

是的,这是可能的。我使用了选项卡模板并得出以下结果:

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

And in each controller you will need the corresponding functions:

在每个控制器中,您将需要相应的功能:

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

I don't know if this is best practice and very robust. Like I said, I just played around a little after reading the docs.

我不知道这是否是最佳实践并且非常健壮。就像我说的,我只是在阅读文档后玩了一会儿。

I hope I gave you an idea of how it could work.

我希望我让你知道它是如何工作的。