ionic之$ionicGesture手势（大坑）

时间：2022-08-06 05:40:19

　　鄙人来本公司前未用过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

举个例子：

结构层：

<div>

     <p>注册、解除手势事件都是按顺序，先button1在button2</p>

     <p>点击bind一次button注册一次事件</p>

     <button ng-click="add()">bind</button>

     <p>点击unbind一次button解除一次事件</p>

     <button ng-click="delete()">unbind</button><br><br>

     <button id="idCardNick">idCardNick button1</button><br><br>

     <button id="licenseNick">licenseNick button2</button>

   </div>

　　只为实现简单的效果，样式比较呵呵！

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

行为层：

　　写在末尾的公用方法

        $scope.add=function(){

             if($scope.data.length<2){$scope.data.push('nick');}

           };

           $scope.delete=function(){

             $scope.data.pop();

           };

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

    function clickFn(ev,idx){

             //这里默认的arguments是event 自定义的参数idx无法获取？？

             console.log(arguments);

             console.log(idx);//undefined

             console.log($scope.idx);//这样可以获取idx对象

           };
这里要注意的就是监听函数的默认参数event，我开始天真的写成下面这样
function clickFn(idx){

　　……

    }

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

监听data.length动态添加删除click事件
　　$scope.data=[];

　　var clickGesture0,clickGesture1,unbindWatch;         
 　 unbindWatch=$scope.$watch('data.length',function(newval,oldval){

             if(newval==0){

               if(clickGesture0){OffclickFn(clickGesture0);}

               if(clickGesture1){OffclickFn(clickGesture1);}

             }else if(newval==1){

               clickGesture0=AddclickFn('#idCardNick',0);

               if(clickGesture1){OffclickFn(clickGesture1);}

             }else if(newval==2){

               clickGesture1=AddclickFn('#licenseNick',1);

             }else{//不用时为了性能销毁watch

               unbindWatch();

             }

             console.log(clickGesture0);

           });

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

　　写法一：

    function AddclickFn(selector,idx){

             return $ionicGesture.on('click',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('click',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,'click',clickFn);

     };

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

<!DOCTYPE html>

<html ng-app="nickApp">

<head>

  <meta charset="utf-8" name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">

  <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在button2</p>

     <p>点击bind一次button注册一次事件</p>

     <button ng-click="add()">bind</button>

     <p>点击unbind一次button解除一次事件</p>

     <button ng-click="delete()">unbind</button><br><br>

     <button id="idCardNick">idCardNick button1</button><br><br>

     <button id="licenseNick">licenseNick button2</button>

   </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('nickApp',['ionic'])

       .controller('nickCtrl', ['$scope','$ionicGesture',

         function ($scope,$ionicGesture){

           $scope.data=[];

           var clickGesture0,clickGesture1,unbindWatch;

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

           unbindWatch=$scope.$watch('data.length',function(newval,oldval){

             if(newval==0){

               if(clickGesture0){OffclickFn(clickGesture0);}

               if(clickGesture1){OffclickFn(clickGesture1);}

             }else if(newval==1){

               clickGesture0=AddclickFn('#idCardNick',0);

               if(clickGesture1){OffclickFn(clickGesture1);}

             }else if(newval==2){

               clickGesture1=AddclickFn('#licenseNick',1);

             }else{//不用时为了性能销毁watch

               unbindWatch();

             }

             console.log(clickGesture0);

           });

           /*function AddclickFn(selector,idx){

             return $ionicGesture.on('click',function(){

               console.log(arguments);

               console.log(idx);//这样可以获取idx

             },angular.element(document.querySelector(selector)));

           };*/

           function AddclickFn(selector,idx){//将idx存入options.idx在作为对象存入$scope.idx

             return $ionicGesture.on('click',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('nick');}

           };

           $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,'click',clickFn);

           };

         }]);

   </script>

</body>

</html>

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

相关文章