如何刷过不同的离子标签

Posted 2023-04-13

【中文标题】如何刷过不同的离子标签

【英文标题】：How to swipe through different ionic tabs

【发布时间】：2015-07-30 04:35:34

【问题描述】：

第一次在这里发帖，但非常感谢您对此的帮助或建议：

我目前正在使用 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');

);

我想知道的是；有没有办法让用户左右滑动来切换不同的页面？

有可能吗？如果是这样，是否也应该在需要滚动的时候？

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

【参考方案1】：

是的，这是可能的。我玩弄了标签模板，得到了以下结果：

<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 之后玩了一下。

我希望我能告诉你它是如何工作的。

【讨论】：

但是当你这样做时你不会得到slide 动画。

幻灯片动画是什么意思？可以举个例子吗？

这可行，但视图从一个视图跳转到另一个视图。没有动画，我所说的动画是指当您在 ionic 中拉侧菜单时获得的那种拉动动画。下一个视图从侧面拉出，并且在断点卡入视口之后......但是感谢这个工作

啊，我明白了……但这也应该是可能的。就像我说的，这只是一个概念证明。您可以进一步详细说明。我只是给你一个基本的想法:)

另一种解决方案是在标签之外使用 Ionic Slide Box。可以使用滑动框（具有内置动画）创建页面导航，并在页面底部添加标签作为视觉元素。单击每个选项卡将调用使用$ionicSlideBoxDelegate.slide() 转到正确幻灯片的函数。