angular1中swipe滑动的使用

最新推荐文章于 2022-11-24 13:16:54 发布

mollerlala

最新推荐文章于 2022-11-24 13:16:54 发布

阅读量1.7k

点赞数

分类专栏：前端框架--angular1 文章标签： angular swipe

本文链接：https://blog.csdn.net/mollerlala/article/details/81559201

版权

前端框架--angular1 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图：

完整代码：

<!DOCTYPE html>
<html lang="en" ng-app="myApp" >
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>angular  direcive</title>
	<link rel="shortcut icon" href="favicon.ico" /> 
	<script src="js/angular.min.js"></script>
	<!-- swipe事件需要依赖touch模块，引入Animate是为了渐出动画效果 -->
	<script src="js/touch.js"></script>
	<script src="js/animate.js"></script>
	<style type="text/css">
		html,body{touch-action: none;width: 100%;height: 100%;}/*touch-action: none;解决Unable to preventDefault inside passive event listener due to target being treated as passive错误*/
		.main{text-align: center;width: 100%;}
		.sider{height: 100%;color: #fff;width: 100%;background: rgba(0,0,0,0.5);transition: all 1s linear;}
		.sideleft{position: fixed;top: 0;right: 0;text-align: right;}
		.sideright{position: absolute;top: 0;left: 0;background: rgba(82,205,186,0.5);}
		.sideright.ng-hide{transform: translateX(-100%);transition: all 0s linear;}
		.sideleft .hidec{position: absolute;left:0;top:0;width: 50%;height: 100%;}
		.sideleft .content{position: absolute;right:0;top:0;width: 50%;height: 100%;background: rgba(82,160,205,0.5);}
		.sideleft.ng-hide{transform: translateX(100%);transition: all 0s linear;}
	</style>
</head>
<body ng-controller="swipeController" ng-swipe-disable-mouse ng-swipe-left="slfun();$event.preventDefault(); $event.stopPropagation();" ng-swipe-right="srfun();$event.preventDefault(); $event.stopPropagation();" >
	<div class="main">
		<button ng-click="showleft=true">左边层</button>
		滑动效果调在手机模式看<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!<br/>
	    test swipe!test swipe!test swipe!
	</div>
	<div class="sideright sider" ng-show='showright' ng-swipe-left="clfun();$event.preventDefault(); $event.stopPropagation();">
		right!<br/>
		right!<br/>
		right!<br/>
		right!<br/>
		right!<br/>
		right!<br/>
		right!<br/>
		right!<br/>
		right!<br/>
		right!<br/>
		right!<br/>
		right!<br/>
		right!<br/>
		right!<br/>
		right!<br/>
		right!<br/>
		right!<br/>
		right!
	</div>
	<div class="sideleft sider" ng-show='showleft' ng-swipe-right="crfun();$event.preventDefault(); $event.stopPropagation();">
		<div class="hidec" ng-click='showleft=false'></div>
		<div class="content">
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!<br/>
			I'm the left div ,swipe left to see me!
		</div>
	</div>
</body>
<script>
		var dapp = angular.module('myApp', ['ngTouch','ngAnimate']);//swipe需要依赖touch模块，引入ngAnimate是为了渐出动画效果
		dapp.controller('swipeController',function($scope,$animate){
			var self = this;
			$scope.showleft = false;
			$scope.showright = false;
			$scope.color = 'yellow';
			$scope.slfun = function(){
				$scope.showleft = true;
			}
			$scope.srfun = function(){
				$scope.showright = true;
			}
			$scope.clfun = function(){
				$scope.showright = false;
			}
			$scope.crfun = function(){
				$scope.showleft = false;
			}
		})		
</script>
</html>