- 移动 Angular UI 教程
- 移动 Angular UI - 主页
- 移动 Angular UI - 概述
- 移动 Angular UI - 安装
- 移动 Angular UI - 项目设置
- 移动 Angular UI - 我的第一个应用程序
- 移动 Angular UI - 布局
- 移动 Angular UI - 组件
- 移动 Angular UI - 下拉菜单
- 移动 Angular UI - 手风琴
- 移动 Angular UI - 选项卡
- 移动 Angular UI - 拖放
- 移动 Angular UI - 可滚动区域
- 移动 Angular UI - 表单
- 移动 Angular UI - 滑动手势
- 移动 Angular UI - 切换开关
- 移动 Angular UI - 部分
- 移动 Angular UI - 核心细节
- 移动 Angular UI - 触摸事件
- 移动 Angular UI - PhoneGap 和 Cordova
- 移动 Angular UI - 创建 APK 文件
- 移动 Angular UI - 应用程序开发
- 移动 Angular UI - 示例
- 移动 Angular UI 资源
- 移动 Angular UI - 快速指南
- 移动 Angular UI - 有用资源
- 移动 Angular UI - 讨论
移动 Angular UI - 触摸事件
要使用触摸及其事件,您需要添加以下模块 -
mobile-angular-ui.gestures
如果您只对触摸模块感兴趣,那么您可以仅添加mobile-angular-ui.gestures.touch。
$ touch 是触摸模块提供的一项服务。它适用于您想要使用的任何输入设备。它提供了运动、持续时间、速度、方向等详细信息。
$touch 中的方法
以下是 $touch 中可用的方法 -
绑定
让我们看一下bind方法。
句法
$touch.bind(element, eventHandlers, [options])
参数
element - 您想要处理触摸细节的 html 元素。
eventHandlers - 具有特定触摸事件处理程序的对象。可用的事件处理程序是 -
start - 这是 touchstart 事件的回调。
end - 这是 touchend 的回调事件。
move - 这是 touchmove 事件的回调。
cancel - 这是 touchcancel 事件的回调。
options - 它是一个可以包含以下详细信息的对象 -
moveThreshold - 一个整数值。开始触发 touchmove 处理程序之前移动的像素数。
valid - 它是一个返回布尔值的函数,该值决定是否应处理或忽略触摸。
sensitiveArea - 它可以是函数、元素或 BoundingClientRect。敏感区域定义了边界,以便在外部有移动时释放触摸。
pointerTypes - 它是一个指针数组,其中的键是默认指针事件映射的子集。
$ touch中可用的类型
以下是 $touch 中可用的类型 -
财产 | 类型 | 描述 |
---|---|---|
类型 | 细绳 | 这将告诉您事件的类型。例如 - touchmove、touchstart、touchend、touchcancel |
时间戳 | 日期 | 触摸发生时的时间戳 |
期间 | 整数 | 当前触摸事件与触摸开始的区别 |
开始X | 漂浮 | touchstart的X坐标 |
启动Y | 漂浮 | touchstart的Y坐标 |
上一个X | 漂浮 | 先前发生的 touchstart 或 touchmove 的 X 坐标 |
上一个 | 漂浮 | 先前发生的 touchstart 或 touchmove 的 Y 坐标 |
X | 漂浮 | 触摸事件的X坐标 |
y | 漂浮 | 触摸事件的Y坐标 |
步 | 漂浮 | prevX,prevY 与 x,y 点之间的距离 |
步骤X | 漂浮 | prevX 和 x 点之间的距离 |
步Y | 漂浮 | prevY 和 y 点之间的距离 |
速度 | 漂浮 | 每秒触摸事件的像素速度 |
平均速度 | 漂浮 | 每秒触摸启动事件的平均速度 |
距离 | 漂浮 | startX、startY 和 x,y 点之间的距离 |
距离X | 漂浮 | startX 和 x 点之间的距离 |
距离Y | 漂浮 | startY 和 y 点之间的距离 |
全部的 | 漂浮 | 总移动,即跨设备完成的水平和垂直移动 |
总计X | 漂浮 | 总运动,即水平方向。还包括转向和方向改变 |
总Y | 漂浮 | 总运动,即垂直方向。还包括转向和方向改变 |
方向 | 漂浮 | 触摸的左、上、下、右方向位置 |
角度 | 漂浮 | 与 x 轴和 y 轴的角度(以度为单位) |
这是一个显示触摸类型的工作示例。
索引.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Mobile Angular UI Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" /> <meta name="apple-mobile-web-app-status-bar-style" content="yes" /> <link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon" /> <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-hover.min.css" /> <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-base.min.css" /> <link rel="stylesheet" href="node_modules/mobile-angular-ui/dist/css/mobile-angular-ui-desktop.min.css" /> <script src="node_modules/angular/angular.min.js"></script> <script src="node_modules/angular-route/angular-route.min.js"></script> <script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script> <script src="node_modules/angular-route/angular-route.min.js"></script> <script src="node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.gestures.min.js"></script> <link rel="stylesheet" href="src/css/app.css" /> <script src="src/js/app.js"></script> <style> a.active { color: blue; } </style> </head> <body ng-app="myFirstApp" ng-controller="MainController" class="listening"> <!-- Sidebars --> <div class="sidebar sidebar-left "> <div class="scrollable"> <h1 class="scrollable-header app-name">Tutorials</h1> <div class="scrollable-content"> <div class="list-group" ui-turn-off='uiSidebarLeft'> <a class="list-group-item" href="/">Home Page </a> <a class="list-group-item" href="#/academic"><i class ="fa fa-caret-right"></i>Academic Tutorials </a> <a class="list-group-item" href="#/bigdata"><i class ="fa fa-caret-right"></i>Big Data & Analytics </a> <a class="list-group-item" href="#/computerProg"><i class="fa fa-caret-right"></i>Computer Programming </a> <a class="list-group-item" href="#/computerscience"><i class="fa fa-caret-right"></i>Computer Science </a> <a class="list-group-item" href="#/databases"><i class="fa fa-caret-right"></i>Databases </a> <a class="list-group-item" href="#/devops"><i class="fa fa-caret-right"></i>DevOps </a> </div> </div> </div> </div> <div class="sidebar sidebar-right"> <div class="scrollable"> <h1 class="scrollable-header app-name">eBooks</h1> <div class="scrollable-content"> <div class="list-group" ui-toggle="uiSidebarRight"> <a class="list-group-item" href="#/php"><i class="fa fa-caret-right"></i>PHP </a> <a class="list-group-item" href="#/Javascript"><i class="fa fa-caret-right"></i>Javascript </a> </div> </div> </div> </div> <div class="app"> <div class="navbar navbar-app navbar-absolute-top"> <div class="navbar-brand navbar-brand-center" ui-yield-to="title"> TutorialsPoint </div> <div class="btn-group pull-left"> <div ui-toggle="uiSidebarLeft" class="btn sidebar-left-toggle"> <i class="fa fa-th-large "></i> Tutorials </div> </div> <div class="btn-group pull-right" ui-yield-to="navbarAction"> <div ui-toggle="uiSidebarRight" class="btn sidebar-right-toggle"> <i class="fal fa-search"></i> eBooks </div> </div> </div> <div class="navbar navbar-app navbar-absolute-bottom"> <div class="btn-group justified"> <a ui-turn-on="aboutus_modal" class="btn btn-navbar"><i class="fal fa-globe"></i> About us</a> <a ui-turn-on="contactus_overlay" class="btn btn-navbar"><i class="fal fa-map-marker-alt"></i> Contact us</a> </div> </div> <!-- App body --> <div class='app-body'> <div class='app-content'> <ng-view></ng-view> </div> </div> </div><!-- ~ .app --> <!-- Modals and Overlays --> <div ui-yield-to="modals"></div> </body> </html>
app.js 中添加了touchtest指令,该指令使用 $touch.bind 方法。
directive('touchtest', ['$touch', function($touch) { return { restrict: 'C', link: function($scope, elem) { $scope.touch=null; $touch.bind(elem, { start: function(touch) { $scope.containerRect=elem[0].getBoundingClientRect(); $scope.touch=touch; $scope.$apply(); }, cancel: function(touch) { $scope.touch=touch; $scope.$apply(); }, move: function(touch) { $scope.touch=touch; $scope.$apply(); }, end: function(touch) { $scope.touch=touch; $scope.$apply(); } }); } }; }]);
app.js 中的完整代码如下 -
/* eslint no-alert: 0 */ 'use strict'; // // Here is how to define your module // has dependent on mobile-angular-ui // var app=angular.module('myFirstApp', ['ngRoute', 'mobile-angular-ui', 'mobile-angular-ui.gestures', ]); app.config(function($routeProvider, $locationProvider) { $routeProvider .when("/", { templateUrl : "src/home/home.html" }); $locationProvider.html5Mode({enabled:true, requireBase:false}); }); app.directive('touchtest', ['$touch', function($touch) { return { restrict: 'C', link: function($scope, elem) { $scope.touch=null; $touch.bind(elem, { start: function(touch) { $scope.containerRect=elem[0].getBoundingClientRect(); $scope.touch=touch; $scope.$apply(); }, cancel: function(touch) { $scope.touch=touch; $scope.$apply(); }, move: function(touch) { $scope.touch=touch; $scope.$apply(); }, end: function(touch) { $scope.touch=touch; $scope.$apply(); } }); } }; }]); app.controller('MainController', function($rootScope, $scope, $routeParams) { $scope.msg="Welcome to TutorialsPoint!"; });
src/home/home.html
指令 touchtest 在 html 中使用,如下所示 -
<div class="section touchtest"> <h4>Touch Around on the screen to see the values changing</h4> <div> <p>type: {{touch.type}}</p> <p>direction: {{touch.direction == null ? '-' : touch.direction}}</p> <p>point: [{{touch.x}}, {{touch.y}}]</p> <p>step: {{touch.step}} [{{touch.stepX}}, {{touch.stepY}}]</p> <p>distance: {{touch.distance}} [{{touch.distanceX}}, {{touch.distanceY}}]</p> <p>total: {{touch.total}} [{{touch.totalX}}, {{touch.totalY}}]</p> <p>velocity: {{touch.velocity}} px/sec</p> <p>averageVelocity: {{touch.averageVelocity}} px/sec</p> <p>angle: {{touch.angle == null ? '-' : touch.angle}} deg</p> </div> </div>
现在让我们测试浏览器中的显示。结果屏幕如下 -