<pre><code class="lang-html"><html lang = en>
<head>
<link rel = stylesheet
href = https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css>
<script src = https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js></script>
<script src = https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js></script>
<script src = https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js></script>
<script src = https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js></script>
<script src = https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js></script>
<link rel = stylesheet href = https://fonts.googleapis.com/icon?family=Material+Icons>
<style>
.swipeContainer .demo-swipe {
padding: 20px 10px;
}
.swipeContainer .no-select {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<script language = javascript>
angular
.module('f
irstApplication', ['ngMaterial'])
.controller('swipeController', swipeController);
function swipeController ($s
cope) {
$s
cope.onSwipeLeft = function(ev) {
alert('Swiped Left!');
};
$s
cope.onSwipeRight = function(ev) {
alert('Swiped Right!');
};
$s
cope.onSwipeUp = function(ev) {
alert('Swiped Up!');
};
$s
cope.onSwipeDown = function(ev) {
alert('Swiped Down!');
};
}
</script>
</head>
<body ng-app = f
irstApplication>
<
md-card>
<div id = swipeContainer ng-controller = swipeController as ctrl
layout = row ng-cloak>
<div flex>
<div class = demo-swipe md-swipe-left = onSwipeLeft()>
<span class = no-select>Swipe me to the left</span>
<md-icon md-font-icon = android aria-label = android></md-icon>
</div>
<md-divider></md-divider>
<div class = demo-swipe md-swipe-right = onSwipeRight()>
<span class = no-select>Swipe me to the right</span>
</div>
</div>
<md-divider></md-divider>
<div flex layout = row>
<div flex layout = row layout-align = center center
class = demo-swipe md-swipe-up = onSwipeUp()>
<span class = no-select>Swipe me up</span>
</div>
<md-divider></md-divider>
<div flex layout = row layout-align = center center
class = demo-swipe md-swipe-down = onSwipeDown()>
<span class = no-select>Swipe me down</span>
</div>
</div>
</div>
</
md-card>
</body>
</html>
</code></pre>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
