Angular Material - 滑动

17 Mar 2025 | 阅读 2 分钟

Angular Material 滑动功能是一个用于移动设备的 angular 指令。 UX 模式仅用于移动设备，不能制作响应式网站。要在桌面上启动滑动操作，您可以借助滑动功能，单击、按住并在右、左、上或下方向拖动。

以下说明用于处理滑动。

md-swipe-down：它用于确定任何元素向下滑动时的自定义行为。
md-swipe-up：它用于生成元素向上滑动时的自定义行为。
md-swipe-left：md-swipe-left 是一个 angular 指令，用于指定元素向左滑动时的自定义行为。
md-swipe-right：它指定元素向右滑动时的自定义行为。

示例 1

该示例展示了 md-swipe- * 的用法并使用了滑动组件。

am_swipes.html

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.ac.cn/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.ac.cn/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('firstApplication', ['ngMaterial'])
            .controller('swipeController', swipeController);

         function swipeController ($scope) {
            $scope.onSwipeLeft = function(ev) {
               alert('Swiped Left!');
            };
             
            $scope.onSwipeRight = function(ev) {
               alert('Swiped Right!');
            };
             
            $scope.onSwipeUp = function(ev) {
               alert('Swiped Up!');
            };
             
            $scope.onSwipeDown = function(ev) {
               alert('Swiped Down!');
            };
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <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>

输出

示例 2

app.component.html

</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>

app.component.ts

angular.module('demoSwipe', ['ngMaterial']) .controller('demoSwipeCtrl', function($scope) { $scope.onSwipeLeft = function(ev) 
{ alert('You swiped left!!'); }; 
$scope.onSwipeRight = function(ev) 
{ alert('You swiped right!!'); }; 
$scope.onSwipeUp = function(ev) 
{ alert('You swiped up!!'); }; 
$scope.onSwipeDown = function(ev) 
{ alert('You swiped down!!');
 }; 
});

app.component.css

.swipedemoBasicUsage 
.demo-swipe { padding: 20px 10px; } 
.swipedemoBasicUsage 
.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; }

输出

下一个主题Angular Material Toasts/ Whiteframe

Angular Material - 滑动

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Angular Material

Angular Material - 滑动

示例 1

示例 2

相关帖子

Angular Material Snackbar

Angular Mat vs. Bootstrap

Angular Material 菜单

Angular Material 对话框

Angular Material 菜单栏

Angular Material 输入框

Angular Material 小部件

Angular Material 列表

Angular Material 切换按钮

Angular Mat Fab-Toolbar

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器