cancel-ng-swipe-right-on-child 

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

转载请备注。

posted @ 2015-09-24 17:39  sunnyJun  阅读(249)  评论(0)  编辑  收藏  举报