<!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <!-- 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> <title>一个页面存在多个swipe时,互不影响cancel-ng-swipe-right-on-child</title> </head> <body ng-controller="MyCtrl"> <div id="page" ng-cloak ng-swipe-left="showMenu = true"> <h1>Angular Swipe Menu</h1> <div class="menu-grip box" ng-show="!showMenu" ng-click="showMenu = true"> .<br />.<br />. </div> <nav class="menu box" ng-show="showMenu" ng-swipe-right="showMenu = false"> <ul> <li class="menu_item" ng-repeat='nav in navigation'> <a class="menu_link" ng-href="{{nav.href}}" ng-bind="nav.title"></a> </li> </ul> </nav> <div class="big-swiper box" ng-swipe-right="next();stopActions($event);" ng-swipe-left="prev();stopActions($event);" ng-bind="index"></div> </div> </body> </html> <!-- http://jsfiddle.net/scottux/RLDsU/ -->
*{margin: 0; padding: 0; border: none;} html, body, #page{height: 100%; min-height: 100%;} .box{background-color: #EFEFEF; box-shadow: 0 1px 2px #dedede; border: 1px solid #ddd; border-radius: 4px;} .menu{float: right; min-height:100%; width: 98%;} .menu_item{line-height:2;} .menu_link{display:block; padding-left:1em;} .menu_link:hover{background: #DEDEDE;} .menu-grip{float:right; height:5em; line-height:.5; padding-top:2em; text-align:center; width:1em;} h1{background:black; color:white; font-size:1.1em; line-height:1.3;} .big-swiper{font-size: 5em; height:3em; line-height:3; margin:.5em auto; text-align:center; width:4em;} .big-swiper:before{content:'<a0'; color:#dedede; font-weight:700;} .big-swiper:after{content:'a0>'; color:#dedede; font-weight:700;}
var app = angular.module('myapp', ['ngTouch']); app.controller('MyCtrl', function MyCtrl($scope) { $scope.stopActions = function (event) { if (event.stopPropagation) { event.stopPropagation(); } // if (event.preventDefault) { // event.preventDefault(); // } // event.cancelBubble = true; // event.returnValue = false; }; // Carousel thing $scope.index = 0; // Hide menu $scope.showMenu = false; // Links $scope.navigation = [{ title: "Page A", href: "#pageA" }, { title: "Page B", href: "#pageB" }, { title: "Page C", href: "#pageC" }]; // Increment carousel thing $scope.next = function () { //stopActions($event); $scope.index++; }; // Decrement carousel thing $scope.prev = function () { //stopActions($event); $scope.index--; }; });
转载请备注。