<!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:; padding:; 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:;}

.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:; margin:.5em auto; text-align:center; width:4em;}

.big-swiper:before{content:'<\a0'; color:#dedede; font-weight:;}

.big-swiper:after{content:'\a0>'; color:#dedede; font-weight:;}
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--;

    };

});

转载请备注。

cancel-ng-swipe-right-on-child的更多相关文章

  1. Volley HTTP库系列教程(2)Volley.newRequestQueue示例,发请求的流程,取消请求

    Sending a Simple Request Previous  Next This lesson teaches you to Add the INTERNET Permission Use n ...

  2. Go语言Context（设计及分析）

    context简单概述: Go服务器的每个请求都有自己的goroutine,而有的请求为了提高性能,会经常启动额外的goroutine处理请求,当该请求被取消或超时,该请求上的所有goroutines ...

  3. golang中的context包

    标准库的context包 从设计角度上来讲, golang的context包提供了一种父routine对子routine的管理功能. 我的这种理解虽然和网上各种文章中讲的不太一样, 但我认为基本上还是 ...

  4. Android开发训练之第五章第七节——Transmitting Network Data Using Volley

    Transmitting Network Data Using Volley GET STARTED DEPENDENCIES AND PREREQUISITES Android 1.6 (API L ...

  5. Golang Context 详细介绍

    Golang context 本文包含对context实现上的分析和使用方式,分析部分源码讲解比价多,可能会比较枯燥,读者可以直接跳过去阅读使用部分. ps: 作者本着开源分享的精神撰写本篇文章,如果 ...

  6. golang context 剖析 1.7.4 版本

    1. 内部结构之 - timerCtx . type timerCtx struct { cancelCtx timer *time.Timer // Under cancelCtx.mu. dead ...

  7. Angular6 基础（数据绑定、生命周期、父子组件通讯、响应式编程）

    Angular相比于vue来说,更像一个完整的框架,本身就集成了很多模块,如路由,HTTP,服务等,而vue是需要另外引入比如(vuex,axios等).Angular引入了依赖注入.单元测试.类等后 ...

  8. golang从context源码领悟接口的设计

    注:写帖子时go的版本是1.12.7 go语言中实现一个interface不用像其他语言一样需要显示的声明实现接口.go语言只要实现了某interface的方法就可以做类型转换.go语言没有继承的概念 ...

  9. 深度解密Go语言之context

    目录 什么是 context 为什么有 context context 底层实现原理 整体概览 接口 Context canceler 结构体 emptyCtx cancelCtx timerCtx ...

  10. 带小伙伴手写 golang context

    前言 - context 源码 可以先了解官方 context.go 轮廓. 这里捎带保存一份当前 context 版本备份. // Copyright 2014 The Go Authors. Al ...

随机推荐

  1. 物联网操作系统 - Contiki

    What is Contiki? Contiki is an open source operating system for the Internet of Things. Contiki conn ...

  2. Python字符编码讲解

    声明:本文参考 Python字符编码详解 在计算机中我们不管用什么语言和程序,最终数据在计算机中的都是字节码(也就是01形式)的形式存在的,如果 计算机直接把字节码显示在屏幕上,很明显一般人看不懂字节 ...

  3. angular2 学习笔记 (Pipes)

    Pipe 就是 ng1 的 filter <pre>{{ jsonValue | json }}</pre> 用法看这里就很清楚了 : https://angular.cn/d ...

  4. Struts2+JFreeChart

    前言 关于Struts2入门以及提高等在这里就不介绍了,但是关于Struts2的学习有以下推荐: struts2-showcase-2.0.6.war:这个是官方自带的Demo(struts-2.0. ...

  5. CodeForce 7 B - Memory Manager（模拟）

    题目大意:给你一段内存,要你进行如下的三个操作. 1.分配内存  alloc   X ,分配连续一段长度为X的内存. 如果内存不够应该输出NULL,如果内存够就给这段内存标记一个编号. 2.擦除编号为 ...

  6. HDU 2476 String painter（记忆化搜索， DP）

    题目大意: 给你两个串,有一个操作! 操作时可以把某个区间(L,R) 之间的所有字符变成同一个字符.现在给你两个串A,B要求最少的步骤把A串变成B串. 题目分析: 区间DP, 假如我们直接想把A变成B ...

  7. 数据结构，可并堆(左偏树)：COGS [APIO2012] 派遣

    796. [APIO2012] 派遣 在一个忍者的帮派里,一些忍者们被选中派遣给顾客,然后依据自己的工作获取报偿.  在这个帮派里,有一名忍者被称之为Master.除了Master以外,每名忍者都有且 ...

  8. 斜率优化(CDQ分治，Splay平衡树)：BZOJ 1492: [NOI2007]货币兑换Cash

    Description Input 第一行两个正整数N.S,分别表示小Y 能预知的天数以及初始时拥有的钱数. 接下来N 行,第K 行三个实数AK.BK.RateK,意义如题目中所述 Output 只有 ...

  9. 微信支付【get_brand_wcpay_request:fail_invalid appid】

    微信支付授权目录一定要注意大小写 艹 如下的WXPay2 千万不要写成WxPay2了 参考地址:http://q.cnblogs.com/q/70405/ 微信支付代码下载:http://files. ...

  10. bzoj 1055 [HAOI2008]玩具取名（区间DP）

    1055: [HAOI2008]玩具取名 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1258  Solved: 729[Submit][Statu ...