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 相关文章推荐
js 利用className得到对象的实现代码
Nov 15 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 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
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
mac下安装nginx和php
2013/11/04 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
JS内部事件机制之单线程原理
2018/07/02 Javascript
vue中用 async/await 来处理异步操作
2020/07/18 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
使用python实现扫描端口示例
2014/03/29 Python
初学Python实用技巧两则
2014/08/29 Python
Python魔法方法功能与用法简介
2019/04/04 Python
python conda操作方法
2019/09/11 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
使用Python实现分别输出每个数组
2019/12/06 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
J2EE面试题大全
2016/08/06 面试题
大型车展策划方案
2014/02/01 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
法学专业求职信范文
2015/03/19 职场文书
张思德观后感
2015/06/09 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python