<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="utf-8"> <!-- add styles --> <link href="css/style.css" rel="stylesheet" type="text/css" /> <!-- add javascripts --> <!-- <script src="js/jquery-2.1.3.min.js"></script> 不需要 --> <script src="js/angular.min.js"></script> <!-- <script src="js/angular-animate.min.js"></script> 不需要 --> <script src="js/angular-touch.min.js"></script> <script src="js/app.js"></script> </head> <body> <div ng-controller="myController"> <div class="type-tabs"> <div ng-repeat="item in [1,2,3,4]" ng-click="changeIndex($index)">Tab{{item}}</div> </div> <div class="guid-bar"> <div class="guid-bar-content" style="left:{{25*activeIndex}}%"></div> </div> <div class="tab-content" ng-swipe-right="swipeRight()" ng-swipe-left="swipeLeft()"> <div class="tab-content-inner" style="left:{{ -100*activeIndex}}%"> <div class="tab-content-item" ng-repeat="item in [1,2,3,4]" > <h1 ng-bind="'Tab' + item"></h1> </div> </div> </div> </div> </body> </html> <!-- http://codepen.io/dayu/pen/dPggXZ/ -->
*{margin: 0; padding: 0; border: none; font-family:'Arial';} .type-tabs{width: 100%; height: 40px;} .type-tabs div{float: left; width: 25%; line-height: 40px; text-align: center; cursor:pointer; user-select:none; -webkit-user-select:none;} .guid-bar{position: relative; margin-top: -3px;} .guid-bar-content{width: 25%; height: 3px; background-color: #345; position: absolute; left: 50%; transition:all 400ms ease;} .tab-content{width: 100%; height: 500px; background-color: #ccc; overflow: hidden;} .tab-content-inner{width: 400%; position: relative; transition: all 400ms;} .tab-content-item{width: 25%; float: left; text-align:center;}
var myApp = angular.module('myApp', ['ngTouch']); //'ngAnimate', myApp.controller('myController', function ($scope) { $scope.activeIndex=0; $scope.changeIndex=function(index){ $scope.activeIndex=index; }; $scope.swipeLeft=function(){ $scope.activeIndex=++$scope.activeIndex; $scope.check(); }; $scope.swipeRight=function(){ $scope.activeIndex=--$scope.activeIndex; $scope.check(); }; $scope.check=function(){ if($scope.activeIndex>3){ $scope.activeIndex=0; } if($scope.activeIndex<0){ $scope.activeIndex=3; } } });