如何使用角度js路由实现基于路由的选项卡导航滑动？

时间：2015-06-24 19:02:27

标签： tabs navigation angular-ui-router material-design angular-material

我希望做的是实现基于Angular-UI-ROUTING和Angular-Material库的可跳过导航。我想要完成的是，如果用户想要更改为另一个选项卡，则可以在选项卡上滑动。因此，如果用户在“Tab＃2”的位置滑动，他们就可以移动到TAB3而无需实际点击TAB3。

下面是我到目前为止创建的选项卡式导航的示例图片：

Angular Routing Material Tabs

及以下是代码段或codepen 

(function(angular, undefined) {
    "use strict";
    angular.module('dsntApp', ['ngMaterial', "ui.router"])
    .config(function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/tab/dash');
        $stateProvider
        .state('view1', {
            url: "/view1",
            templateUrl: "partials/view1.html"
        })
        .state('view2', {
            url: "/view2",
            templateUrl: "partials/view2.html"
        })
        .state('view3', {
            url: "/view3",
            templateUrl: "partials/view3.html"
        })
        ;
    })
    .controller('tabCtrl', function($scope, $location, $log) {
        $scope.selectedIndex = 0;

        $scope.$watch('selectedIndex', function(current, old) {
            switch (current) {
                case 0:
                    $location.url("/view1");
                    break;
                case 1:
                    $location.url("/view2");
                    break;
                case 2:
                    $location.url("/view3");
                    break;
            }
        });
    });

})(angular);
.intro {
    position: absolute;
    left: 30px;
    top: 20px;
    width: 600px;
    height: 20px;
    font-size : 12px;
}

.demo {
    position: relative;
    width: 600px;
    height: 300px;
    background-color: #cccccc;
    margin-top: 40px;
    margin-left: 0px;
}

.demo #content {
    background-color: rgb(255, 255, 255);
    padding: 30px;
    font-weight: 600;
    border: 1px solid #999999;
    border-top: none;
}
<link href="http://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="http://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-aria.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-animate.js"></script>
<div class="intro">
  This demonstration shows how Angular-Material Tabs can be used with Angular-UI-Router
<div>
  
<div ng-app="dsntApp" 
     ng-controller="tabCtrl"
     layout="column" class="demo" >

  <script type="text/ng-template" id="partials/view1.html">  Tab #1 </script>
  <script type="text/ng-template" id="partials/view2.html">  Tab #2 </script>
  <script type="text/ng-template" id="partials/view3.html">  Tab #3 </script>
  <md-toolbar>
    <h2 class="md-toolbar-tools">
      <span>Toolbar</span>
    </h2>
  </md-toolbar>
  <md-tabs md-stretch-tabs 
           md-selected="selectedIndex">
     <md-tab label="tab1"></md-tab> 
     <md-tab label="tab2"></md-tab>
     <md-tab label="tab3"></md-tab>  
  </md-tabs>

  <div id="content" ui-view flex> </div>

</div>

1 个答案:

答案 0 :(得分：0)

你必须使用指令：

MD-滑动左： https://material.angularjs.org/latest/#/api/material.components.swipe/directive/mdSwipeLeft

md-swipe-right：https://material.angularjs.org/latest/#/api/material.components.swipe/directive/mdSwipeRight 

(function(angular, undefined) {
    "use strict";
    angular.module('dsntApp', ['ngMaterial', "ui.router"])
    .config(function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/tab/dash');
        $stateProvider
        .state('view1', {
            url: "/view1",
            templateUrl: "partials/view1.html"
        })
        .state('view2', {
            url: "/view2",
            templateUrl: "partials/view2.html"
        })
        .state('view3', {
            url: "/view3",
            templateUrl: "partials/view3.html"
        })
        ;
    })
    .controller('tabCtrl', function($scope, $location, $log) {
        $scope.selectedIndex = 0;

        $scope.onSwipeRight = function (){
      
       if ($scope.selectedIndex < 2){
	       $scope.selectedIndex  = $scope.selectedIndex + 1;
	   }
	   // if you want to make all the tour
	   else{
		   $scope.selectedIndex  = 0;
	   }
   }

   $scope.onSwipeLeft = function () {
      
        if ($scope.selectedIndex > 0){
		   $scope.selectedIndex  = $scope.selectedIndex - 1;
	    }
	    // if you want to make all the tour
	   else {
		   $scope.selectedIndex  = 2;
	   }
   }

        $scope.$watch('selectedIndex', function(current, old) {
            switch (current) {
                case 0:
                    $location.url("/view1");
                    break;
                case 1:
                    $location.url("/view2");
                    break;
                case 2:
                    $location.url("/view3");
                    break;
            }
        });
    });

})(angular);
.intro {
    position: absolute;
    left: 30px;
    top: 20px;
    width: 600px;
    height: 20px;
    font-size : 12px;
}

.demo {
    position: relative;
    width: 600px;
    height: 300px;
    background-color: #cccccc;
    margin-top: 40px;
    margin-left: 0px;
}

.demo #content {
    background-color: rgb(255, 255, 255);
    padding: 30px;
    font-weight: 600;
    border: 1px solid #999999;
    border-top: none;
}
<link href="http://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="http://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-aria.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-animate.js"></script>
<div class="intro">
  This demonstration shows how Angular-Material Tabs can be used with Angular-UI-Router
<div>
  
<div ng-app="dsntApp" 
     ng-controller="tabCtrl"
     layout="column" class="demo" >

  <script type="text/ng-template" id="partials/view1.html">  Tab #1 </script>
  <script type="text/ng-template" id="partials/view2.html">  Tab #2 </script>
  <script type="text/ng-template" id="partials/view3.html">  Tab #3 </script>
  <md-toolbar>
    <h2 class="md-toolbar-tools">
      <span>Toolbar</span>
    </h2>
  </md-toolbar>
  <md-tabs md-stretch-tabs 
           md-selected="selectedIndex">
     <md-tab label="tab1"></md-tab> 
     <md-tab label="tab2"></md-tab>
     <md-tab label="tab3"></md-tab>  
  </md-tabs>

  <div id="content" ui-view flex md-swipe-left="onSwipeLeft()" md-swipe-right="onSwipeRight()"> </div>
</div>

相关问题
最新问题