热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

ionic之$ionicGesture手势(大坑)

鄙人来本公司前未用过ionic框架,但由于ionic是基于angularjs封装的,正好我用过angularjs,很荣幸的面试就过了&#x

鄙人来本公司前未用过ionic框架,但由于ionic是基于angularjs封装的,正好我用过angularjs,很荣幸的面试就过了,然后通过该网站http://www.ionic.wang(后面简称网站i)边学ionic边做项目。

  ionic刚踩过的坑--$ionicGesture!现总结下$ionicGesture,希望对用到该框架的童鞋有所帮助!

  网站i对$ionicGesture的介绍如下:

  在一个元素上添加一个事件监听器。


$ionicGesture.on(eventType, callback, $element)

  在一个元素上移除一个手势事件监听器。


$ionicGesture.off(eventType, callback, $element)

  参数介绍:


参数 类型 详情
eventType string 监听的手势事件。
callback
function(e) 当手势事件发生时触发的事件。
$element element angular元素监听的事件

  网站i这对$ionicGesture的介绍把我坑的不要不要的,.on()方法没错,.off()参数不对啊!

  这里的off()方法我按网站i的介绍做完,弄了好久都不行,后来按住alt点击$ionicGesture.off进去看源码是这样的才知道网站i介绍该方法错了。

  现整理汇总如下:


$ionicGesture服务--注册/解除手势事件监听


  注册手势事件监听函数


$ionicGesture.on(eventType, callback, $element)

on()方法返回的是一个ionic.gesture对象,可供解除监听用。

参数介绍:


  • 参数eventType是支持的事件类型;
  • 参数callback指定监听函数;
  • 参数$element是要绑定事件的jqLite元素;
  • 参数options是on方法返回对象的一个子对象options。

  解除手势事件监听函数


$ionicGesture.off(gesture,eventType,callback)

  参数介绍:


  • 参数gesture是on()方法返回的结果对象;
  • 参数eventType是支持的事件类型;
  • 参数callback是要移除的监听函数。

注意:canllback默认参数event,后面代码有提到。


  $ionicGesture服务支持的事件类型有:


hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown, dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight, transform, transformstart, transformend, rotate, pinch, pinchin, pinchout, touch, release

举个例子:


结构层:


注册、解除手势事件都是按顺序,先button1在button2

点击bind一次button注册一次事件

点击unbind一次button解除一次事件




  只为实现简单的效果,样式比较呵呵!

  效果:bind、unbind按钮注册、解除手势事件,都是按顺序,先button1在button2。


行为层:


  写在末尾的公用方法


$scope.add=function(){if($scope.data.length<2){$scope.data.push(&#39;nick&#39;);}};$scope.delete=function(){$scope.data.pop();};


  .on()和.off()的监听函数


function clickFn(ev,idx){//这里默认的arguments是event 自定义的参数idx无法获取??
console.log(arguments);console.log(idx);//undefinedconsole.log($scope.idx);//这样可以获取idx对象
};

这里要注意的就是监听函数的默认参数event,我开始天真的写成下面这样

function clickFn(idx){……}

这样写坑死我啦,后来打桩console.log(idx);结果打印出来是event,我勒个去!

监听data.length动态添加删除click事件

  $scope.data=[];var clickGesture0,clickGesture1,unbindWatch;
  unbindWatch=$scope.$watch(&#39;data.length&#39;,function(newval,oldval){if(newval==0){if(clickGesture0){OffclickFn(clickGesture0);}if(clickGesture1){OffclickFn(clickGesture1);}}else if(newval==1){clickGesture0=AddclickFn(&#39;#idCardNick&#39;,0);if(clickGesture1){OffclickFn(clickGesture1);}}else if(newval==2){clickGesture1=AddclickFn(&#39;#licenseNick&#39;,1);}else{//不用时为了性能销毁watch
unbindWatch();}console.log(clickGesture0);});


添加监听手势函数AddclickFn这里有2中写法  


  写法一:


function AddclickFn(selector,idx){return $ionicGesture.on(&#39;click&#39;,function(){console.log(arguments);console.log(idx);//这样可以获取idx
},angular.element(document.querySelector(selector)));};

这样写$ionicGesture.on()的监听函数callback就可以获取参数idx,但是这样写$ionicGesture.off()就不能解除callback监听函数了,所以我写成了第二种写法。


  写法二:


function AddclickFn(selector,idx){return $ionicGesture.on(&#39;click&#39;,clickFn,angular.element(document.querySelector(selector)),$scope.idx={idx:idx});};

  将idx存入options.idx在作为对象存入$scope.idx,这样clickFn就可以使用$scope.idx.idx,即参数idx的值。

  这里虽然写法二能实现效果,但我总感觉这样写不好,希望有大牛能给点建议,给我留言或者qq联系,多谢!

  移除手势监听函数:


function OffclickFn(clickGesture){$ionicGesture.off(clickGesture,&#39;click&#39;,clickFn);};

我把需要注意的地方都加注释了,上完整代码:


DOCTYPE html>
<html ng-app="nickApp">
<head><meta charset="utf-8" name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,><script src="lib/ionic/js/ionic.bundle.min.js">script><link rel="stylesheet" type="text/css" href="lib/ionic/css/ionic.min.css">
head>
<body ng-controller="nickCtrl"><div><p>注册、解除手势事件都是按顺序,先button1在button2p><p>点击bind一次button注册一次事件p><button ng-click="add()">bindbutton><p>点击unbind一次button解除一次事件p><button ng-click="delete()">unbindbutton><br><br><button id="idCardNick">idCardNick button1button><br><br><button id="licenseNick">licenseNick button2button>div><script>
/* http://www.ionic.wang/js_doc-index-id-58.html
on(eventType, callback, $element)
off(eventType, callback, $element)
参数 类型 详情
eventType string 监听的手势事件。
callback function(e) 当手势事件发生时触发的事件。
$element element angular元素监听的事件。
*//*
//完整汇总:
$ionicGesture服务--注册/解除手势事件监听:
on(eventType,callback,$element,options) - 注册手势事件监听函数
参数eventType是支持的事件类型;
参数callback指定监听函数;
参数$element是要绑定事件的jqLite元素。
参数options是on方法返回对象的一个子对象options
on()方法返回的是一个ionic.gesture对象,可供解除监听用。
off(gesture,eventType,callback) - 解除手势事件监听函数
参数gesture是on()方法返回的结果对象,
参数eventType是支持的事件类型
参数callback是要移除的监听函数。
$ionicGesture服务支持的事件类型有:
hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown, dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight, transform, transformstart, transformend, rotate, pinch, pinchin, pinchout, touch, release
*/angular.module(&#39;nickApp&#39;,[&#39;ionic&#39;]).controller(&#39;nickCtrl&#39;, [&#39;$scope&#39;,&#39;$ionicGesture&#39;,function ($scope,$ionicGesture){$scope.data=[];var clickGesture0,clickGesture1,unbindWatch;//监听data.length动态添加删除click事件
unbindWatch=$scope.$watch(&#39;data.length&#39;,function(newval,oldval){if(newval==0){if(clickGesture0){OffclickFn(clickGesture0);}if(clickGesture1){OffclickFn(clickGesture1);}}else if(newval==1){clickGesture0=AddclickFn(&#39;#idCardNick&#39;,0);if(clickGesture1){OffclickFn(clickGesture1);}}else if(newval==2){clickGesture1=AddclickFn(&#39;#licenseNick&#39;,1);}else{//不用时为了性能销毁watch
unbindWatch();}console.log(clickGesture0);});/*function AddclickFn(selector,idx){return $ionicGesture.on(&#39;click&#39;,function(){console.log(arguments);console.log(idx);//这样可以获取idx},angular.element(document.querySelector(selector)));};*/function AddclickFn(selector,idx){//将idx存入options.idx在作为对象存入$scope.idxreturn $ionicGesture.on(&#39;click&#39;,clickFn,angular.element(document.querySelector(selector)),$scope.idx={idx:idx});};/*按住alt点击$ionicGesture.off进去看源码是这样的才知道ionic.wang这网站介绍gusture方法错了off: function(gesture, eventType, cb) {return window.ionic.offGesture(gesture, eventType, cb);}*/$scope.add=function(){if($scope.data.length<2){$scope.data.push(&#39;nick&#39;);}};$scope.delete=function(){$scope.data.pop();};function clickFn(ev,idx){//这里默认的arguments是event 自定义的参数idx无法获取??
console.log(arguments);console.log(idx);//undefined
console.log($scope.idx);//这样可以获取idx对象
};function OffclickFn(clickGesture){$ionicGesture.off(clickGesture,&#39;click&#39;,clickFn);};}]);script>
body>
html>



再唠叨下:上面写法二我总感觉不好,希望有大牛能给点建议,给我留言或者qq联系,多谢!


推荐阅读
  • 成功安装Sabayon Linux在thinkpad X60上的经验分享
    本文分享了作者在国庆期间在thinkpad X60上成功安装Sabayon Linux的经验。通过修改CHOST和执行emerge命令,作者顺利完成了安装过程。Sabayon Linux是一个基于Gentoo Linux的发行版,可以将电脑快速转变为一个功能强大的系统。除了作为一个live DVD使用外,Sabayon Linux还可以被安装在硬盘上,方便用户使用。 ... [详细]
  • 本文介绍了绕过WAF的XSS检测机制的方法,包括确定payload结构、测试和混淆。同时提出了一种构建XSS payload的方法,该payload与安全机制使用的正则表达式不匹配。通过清理用户输入、转义输出、使用文档对象模型(DOM)接收器和源、实施适当的跨域资源共享(CORS)策略和其他安全策略,可以有效阻止XSS漏洞。但是,WAF或自定义过滤器仍然被广泛使用来增加安全性。本文的方法可以绕过这种安全机制,构建与正则表达式不匹配的XSS payload。 ... [详细]
  • 本文介绍了Sencha Touch的学习使用心得,主要包括搭建项目框架的过程。作者强调了使用MVC模式的重要性,并提供了一个干净的引用示例。文章还介绍了Index.html页面的作用,以及如何通过链接样式表来改变全局风格。 ... [详细]
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • GetWindowLong函数
    今天在看一个代码里头写了GetWindowLong(hwnd,0),我当时就有点费解,靠,上网搜索函数原型说明,死活找不到第 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • Windows下配置PHP5.6的方法及注意事项
    本文介绍了在Windows系统下配置PHP5.6的步骤及注意事项,包括下载PHP5.6、解压并配置IIS、添加模块映射、测试等。同时提供了一些常见问题的解决方法,如下载缺失的msvcr110.dll文件等。通过本文的指导,读者可以轻松地在Windows系统下配置PHP5.6,并解决一些常见的配置问题。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 本文介绍了在Linux下安装Perl的步骤,并提供了一个简单的Perl程序示例。同时,还展示了运行该程序的结果。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • 本博文基于《Amalgamationofproteinsequence,structureandtextualinformationforimprovingprote ... [详细]
  • 由于同源策略的限制,满足同源的脚本才可以获取资源。虽然这样有助于保障网络安全,但另一方面也限制了资源的使用。那么如何实现跨域呢,以下是实现跨域的一些方法。 ... [详细]
  • javascript二叉树基本功能实现
    都是常用的功能。删除是最复杂的。。test ... [详细]
  • 本文由编程笔记#小编为大家整理,主要介绍了css回到顶部按钮相关的知识,希望对你有一定的参考价值。 ... [详细]
author-avatar
wugege12
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有