ionic开发--AngularJS--手势事件

最新推荐文章于 2021-04-28 21:41:56 发布

liayn523

最新推荐文章于 2021-04-28 21:41:56 发布

阅读量630

点赞数 1

分类专栏： angularjs ionic 文章标签： ionic angularjs 手势事件

本文链接：https://blog.csdn.net/liayn523/article/details/53213314

版权

ionic 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

angularjs

11 篇文章 0 订阅

订阅专栏

一、拖拽：on-drag

** 在屏幕上按住并移动时，触发on-drag拖动事件：

** 根据运动方向的不同，可以细分为以下几种事件：

on-drag – 向所有方向拖动时都触发此事件
on-drag-up – 向上拖动时触发此事件
on-drag-down – 向下拖动时触发此事件
on-drag-left – 向左拖动时触发此事件
on-drag-right – 向右拖动时触发此事件

可以在任意元素上使用这些指令挂接对应的事件监听函数：

1.<any on-drap="...">...</any>
  示例代码：


  <body  ng-controller="ezCtrl">
    <ion-header-bar class="bar-positive">
      <h1 class="title">on-drag</h1>
    </ion-header-bar>
    <div class="scroll-content has-header padding">
      <img src="img/baymax.png" on-touch="onTouch($event)" on-drag="onDrag($event);">
    </div>
  </body>

 js:


    var ox,oy;
    $scope.onTouch = function($event){
      ox = $event.target.offsetLeft; // 按下鼠标时，距窗口左边的距离
      oy = $event.target.offsetTop;  // 按下鼠标时，距窗口顶部的距离
    };
    $scope.onDrag = function($event){
      //alert('已拖动')
      var el = $event.target,
      dx = $event.gesture.deltaX, // 拖动X轴的距离
      dy = $event.gesture.deltaY; // 拖动Y轴的距离
      el.style.left = ox + dx + "px"; // 物体的left的值
      el.style.top = oy + dy + "px"; // 物体的top的值
    };


    **********

   代码到这里就可以用鼠标拖动物体到处移动了

二、划动 : on-swipe
      在屏幕上按住并快速拖动时，将触发on-swipe划动事件：       根据划动方向的不同，可细分为以下指令：

   
   on-swipe – 向任何方向的划动都触发事件
on-swipe-up – 向上划动时触发事件
on-swipe-down – 向下划动时触发事件
on-swipe-left – 向左划动时触发事件
on-swipe-right – 向右划动时触发事件
       可以在任何元素上使用这些指令挂接事件监听函数：    1.<any on-swipe=“…”>…</any>

    示例代码：
    <body ng-controller="ezCtrl">
      <div class="scroll-content padding"
         on-swipe-up="onSwipeUp()"
         on-swipe-down="onSwipeDown()"
         on-swipe-left="onSwipeLeft()"
         on-swipe-right="onSwipeRight()">
         <p class="padding">按住鼠标快速划！</p>
         <i class="icon {{icon}}"></i>
      </div>
     </body>

         js：     angular.module("ezApp",["ionic"])
     .controller("ezCtrl",function($scope){
        $scope.icon="ion-arrow-expand";
        $scope.onSwipeUp = function(){
           $scope.icon="ion-arrow-up-a";
        };
        $scope.onSwipeDown = function(){
           $scope.icon="ion-arrow-down-a";
        };
        $scope.onSwipeLeft = function(){
           $scope.icon="ion-arrow-left-a";
        };
        $scope.onSwipeRight = function(){
           $scope.icon="ion-arrow-right-a";
        };
      });


三、按下/松开 on-touch/on-release

      在屏幕上按下手指或鼠标键时，会立即触发on-touch事件；当手指抬起或鼠标键松开时， 会立即触发on-release事件。
      可以在任何元素上挂接响应的事件监听函数：

     
             <any on-touch=“…” on-release=“…”>…</any>


       示例代码：
   <body  ng-controller="ezCtrl">
    <ion-header-bar class="bar-positive" ng-class="[style]"
                    on-touch="style='bar-assertive'" on-release="style='bar-positive'">
      <h1 class="title">on-touche/on-release</h1>
    </ion-header-bar>
    <ion-content>
      <img src="img/0021.png">
    </ion-content>
   </body>


      js：


   angular.module(“ezApp”,[“ionic”])
   .controller(“ezCtrl”,function($scope) {
   });


四、双击 : on-double-tap

在屏幕上快速敲击两次，将触发on-double-tap事件：
 
可以在任何元素上使用这个指令挂接事件监听函数：

      
      <any on-double-tap=“…”>…</any>
示例代码：
  <body  ng-controller="ezCtrl">
    <ion-header-bar class="bar-positive" on-double-tap="title='I am double tapped!'">
      <h1 class="title">{{title}}</h1>
    </ion-header-bar>
    <ion-content>
      <p ng-include=" 'txt/xiyouji.txt' "></p>
    </ion-content>
  </body>

    js：   angular.module("ezApp",["ionic"])
   .controller("ezCtrl",function($scope) {
     $scope.title = "on-double-tap";
   });

五、敲击 : on-tap
在屏幕上快速点击一次（停留时间不超过250ms），将触发on-tap事件：可以在任何元素上使用这个指令挂接事件监听函数：    <any on-tap=“…”>…</any>示例代码：  <body  ng-controller="ezCtrl">
    <ion-header-bar class="bar-positive">
      <h1 class="title">on-tap</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list ng-repeat="item in items">
        <ion-item on-tap="show(item);">
          {{item}}
          <ion-reorder-button class="ion-navicon"></ion-reorder-button>
        </ion-item>
      </ion-list>
    </ion-content>
  </body>

 js：  angular.module("ezApp",["ionic"])
  .controller("ezCtrl",function($scope, $ionicPopup) {
    $scope.items=["England","Japan","India","Russian"];
    $scope.show = function(item){
      $ionicPopup.alert({
        title : "警告!",
        template : "为什么要敲 "+ item + "?"
   });
   };
  });

六、长按 : on-hold
在屏幕同一位置按住超过500ms，将触发on-hold事件：
你可以在任何元素上使用这个指令挂接监听函数：

          
          <any on-hold=“…”>…</any>
示例代码：

  <body  ng-controller="ezCtrl">
    <ion-header-bar class="bar-positive"  on-hold="show_delete();">
      <h1 class="title">on-hold</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list ng-repeat="item in items">
        <ion-item>
          {{item}}
          <ion-delete-button class="ion-minus-circled"></ion-delete-button>
          <ion-reorder-button class="ion-navicon"></ion-reorder-button>
        </ion-item>
      </ion-list>
    </ion-content>
    <ion-footer-bar class="bar-positive"></ion-footer-bar>
  </body>

 js：

  angular.module("ezApp",["ionic"])
  .controller("ezCtrl",function($scope, $ionicListDelegate) {
    $scope.items=["China","Japan","India","Russian"];
    $scope.show_delete = function(){
      $ionicListDelegate.showDelete(true);
    };
  });




脚本接口 : $ionicGesture



除了使用之前介绍的特定指令实现手势事件的监听，也可以使用$ionicGesture服务 注册/解除手势事件监听：



    on(eventType,callback,$element,options) – 注册手势事件监听函数



参数eventType是支持的事件类型，参看下面介绍；参数callback指定监听函数； 参数$element是要绑定事件的jqLite元素。



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



    off(gesture,eventType,callback) – 解除手势事件监听函数



参数gesture是on()方法返回的结果对象，参数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



示例代码：



<body  ng-controller=”ezCtrl”>

<ion-header-bar class=”bar-positive”>

<h1 class=”title”>$ionicGesture</h1>

</ion-header-bar>

<ion-content class=”padding”>

<button class=”button” id=”test”>test</button>

</ion-content>

</body>



js：



angular.module(“ezApp”,[“ionic”])

.controller(“ezCtrl”,function($scope,$ionicGesture,$ionicPopup) {

var el = document.querySelector(“#test”);

$ionicGesture.on(“tap”,function(){

$ionicPopup.alert({

title : “提醒”,

template : “这个监听是用$ionicGesture服务注册的！”

})

},angular.element(el));

});



*************************************************
使用jquery实现拖拽

$("#info").mousemove = (function(ev){
  var disX,disY;
  disX = ev.pageX - $(this).offsetLeft;
  disY = ev.pageY - $(this).offsetTop;
  $(document).mousemove(function(ev){
    $("#info").css("left",ev.pageX - disX);
    $("#info").css("top",ev.pageY - disY);
  });
  $(document).mouseup(function(){
    $(this).off();
  });
})