首页 > 编程 > JavaScript > 正文

Angular-Touch库用法示例

2019-11-19 18:19:06
字体:
来源:转载
供稿:网友

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表