Angular-Touch库用法示例


Posted in Javascript onDecember 22, 2016

本文实例讲述了Angular-Touch库用法。分享给大家供大家参考,具体如下:

Angular-touch库用的不多,网上的例子也不多。写个触屏滑动的事件。

先在页面上弄个div

<div id="content" align="center" ng-app="imageApp" image-controller="">
    <p style="position: absolute; width: 100%; margin-top: 30px;z-index: -1;">
      <img id="show"src="assets/image/logo.jpg" />
    </p>
</div>

引入两个库

<script type="text/javascript" src="js/angular/1.4.6/angular.min.js" ></script>
<script type="text/javascript" src="js/angular/1.4.6/angular-touch.min.js" ></script>

注册事件

try{
  angular.module('imageApp',['ngTouch'])
    .directive('imageController',['$swipe',function($swipe){
      return {
        restrict:'EA',
        link:function(scope,ele,attrs,ctrl){
          var startX,startY,locked=false;
          $swipe.bind(ele,{
            'start':function(coords){
              startX = coords.x;
              startY = coords.y;
            },
            'move':function(coords){
              var delta = coords.x - startX;
              if(delta<-300 && !locked){
                console.log('trun right');
              }else if(delta>300 && !locked){
                console.log('trun left');
              }
            },
            'end':function(coords){
            },
            'cancel':function(coords){
            }
          });
        }
      }
    }
  ]);
}catch(e){
  console.error(e);
}

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
Jquery实现无刷新DropDownList联动实现代码
Mar 08 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
jQuery中jqGrid分页实现代码
Nov 04 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
小程序富文本提取图片可放大缩小
May 26 Javascript
Json按某个键的值进行排序
Dec 22 #Javascript
js实现登录验证码
Dec 22 #Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 #Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 #Javascript
基于Javascript倒计时效果
Dec 22 #Javascript
JS前端加密算法示例
Dec 22 #Javascript
jQuery手指滑动轮播效果
Dec 22 #Javascript
You might like
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
PHP浮点数精度问题汇总
2015/05/13 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python从sqlite读取并显示数据的方法
2015/05/08 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
python中使用while循环的实例
2019/08/05 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
绩效工资分配方案
2014/01/18 职场文书
安全教育演讲稿
2014/05/09 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL