使用ionic框架的<ion-scroll>进行水平滚动时，导致页面难以上下滑动的解决方案

最新推荐文章于 2024-12-21 06:11:29 发布

原创最新推荐文章于 2024-12-21 06:11:29 发布 · 2.1w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ionic左右滑动 #html5画廊控件 #左右滑动导致页面难以滚动

ionic 专栏收录该内容

8 篇文章

订阅专栏

在混合app开发中，使用ionic的<ion-scroll>指令创建水平画廊会导致页面上下滑动困难。原因是页面元素过多或类似input控件，使得滑动容易触发其他元素，阻碍页面滚动。文档未提供直接解决方案，最终通过监听HTML5的touchmove和touchstart事件，自定义实现滑动来解决此问题。

混合app开发使用ionic框架的<ion-scroll>指令能够方便地实现水平滚动和垂直滑动。比如我们想实现一个能够水平滑动的画廊，可以使用下面这段代码。

<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<script src="jquery-1.11.1.min.js"></script>
    <script src="./1.1.1-release/js/ionic.bundle.js"></script>
	<link rel="stylesheet" type="text/css" href="./1.1.1-release/css/ionic.css" />
	<style>
	/*nowrap不让img换行*/
	.picturesholder{
		background-color:#fff;
		margin:20px;
		width:400px;
		height:80px;
		overflow: hidden;
		white-space: nowrap;
	}
	
	/**图片占满画廊*/
	.picturesholder img{
		width:100px;
		height:81px;
	}
	</style>

	<script>
	var testModule = angular.module('testApp', ['ionic']);
	testModule.controller('MyController', function($scope, $ionicScrollDelegate) {
		$scope.pictures=["imgs/1.png","imgs/2.png","imgs/3.png","imgs/4.png","imgs/5.png","imgs/6.png","imgs/7.png","imgs/8.png"];
	});
    
	$(function(){
		angular.bootstrap($("#body"), ["testApp"]);	
	})
	</script>
</head>

<body id="body" ng-controller="MyController">
  
	<ion-header-bar class="bar-positive">
		<h1 class="title">bar-positive</h1>
	</ion-header-bar>
  
	<ion-content class="has-header" style="background-color: #ebebeb;">
	
		<div class="picturesholder">
			<ion-scroll direction="x">
				<img ng-src="{{each}}" ng-repeat="each in pictures"></img>
			</ion-scroll>			
		</div>
		
	</ion-content>
	
	<ion-footer-bar class="bar-balanced">
		<div class="title">Footer</div>
	</ion-footer-bar>
</body>
</html>

单看这一个水平画廊是没有什么问题的，功能和操作都很正常。但是我们项目中遇到一个问题：一个页面很大，有多个画廊控件，我们的页面很难上下滑动，滑动非常吃力，这是为什么呢？举个例子：如果你的页面放的全都是input输入控件，那么这个页面一样很难滑动，因为当我们在手机屏幕上滑动的时候，一不小心很容易就会点中这些输入框，当输入框获得焦点，页面就不能滑动了。使用<ion-scroll>一样有这个问题，当页面全是画廊控件的时候，滑动也十分费劲。

从ionic文档中也没有找到好的解决办法，最后解决方法是：不使用<ion-scroll>指令，自己实现左右滑动。利用HTML5中的touchmove和touchstart事件实现滚动：

// do for left-right scroll
var startX = 0;
var startY = 0;
var $gallery = $(".picturesholder");

$gallery.on("touchstart", function(e) {
	 startX = e.originalEvent.changedTouches[0].pageX,
	 startY = e.originalEvent.changedTouches[0].pageY;
});

$gallery.on("touchmove", function(e) {
	var X = e.originalEvent.changedTouches[0].pageX - startX;
	var Y = e.originalEvent.changedTouches[0].pageY - startY;
	 
	if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
		var cur_scroll = $(this).scrollLeft();
		$(this).scrollLeft(parseInt(cur_scroll) - X);
		e.preventDefault();
		e.stopPropagation();
	}
	else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
		var cur_scroll = $(this).scrollLeft();
		$(this).scrollLeft(parseInt(cur_scroll) - X);
		e.preventDefault();
		e.stopPropagation();
	}
	else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
	}
	else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
	}
	else{
	}
});
// do for left-right scroll

web浏览器没有上面2个事件，我们可以用mousedown和mousemove模拟，下面代码一样可以左右滑动。

<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<script src="jquery-1.11.1.min.js"></script>
    <script src="./1.1.1-release/js/ionic.bundle.js"></script>
	<link rel="stylesheet" type="text/css" href="./1.1.1-release/css/ionic.css" />
	<style>
	/*nowrap不让img换行*/
	.picturesholder{
		background-color:#fff;
		margin:20px;
		width:400px;
		height:80px;
		overflow: hidden;
		white-space: nowrap;
	}
	
	/**图片占满画廊*/
	.picturesholder img{
		width:100px;
		height:81px;
	}
	</style>

	<script>
	var testModule = angular.module('testApp', ['ionic']);
	testModule.controller('MyController', function($scope, $ionicScrollDelegate) {
		$scope.pictures=["imgs/1.png","imgs/2.png","imgs/3.png","imgs/4.png","imgs/5.png","imgs/6.png","imgs/7.png","imgs/8.png"];
	});
    
	$(function(){
		angular.bootstrap($("#body"), ["testApp"]);	
		
		// do for left-right scroll
		var startX = 0;
		var startY = 0;
		var $pictures = $(".picturesholder");
		
		$pictures.on("mousedown", function(e) {
			 startX = e.originalEvent.pageX,
			 startY = e.originalEvent.pageY;
		});
		
		$pictures.on("mousemove", function(e) {
			var X = e.originalEvent.pageX - startX;
		    var Y = e.originalEvent.pageY - startY;
		     
		    if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
		        var cur_scroll = $(this).scrollLeft();
		        $(this).scrollLeft(parseInt(cur_scroll) - X);
		        e.preventDefault();
		        e.stopPropagation();
		    }
		    else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
		        var cur_scroll = $(this).scrollLeft();
		        $(this).scrollLeft(parseInt(cur_scroll) - X);
		        e.preventDefault();
		        e.stopPropagation();
		    }
		    else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
		    }
		    else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
		    }
		    else{
		    }
		});
		// do for left-right scroll
	})
	</script>
</head>

<body id="body" ng-controller="MyController">
  
	<ion-header-bar class="bar-positive">
		<h1 class="title">bar-positive</h1>
	</ion-header-bar>
  
	<ion-content class="has-header" style="background-color: #ebebeb;">
	
		<div class="picturesholder">
			<!--<ion-scroll direction="x">-->
				<img ng-src="{{each}}" ng-repeat="each in pictures"></img>
			<!--</ion-scroll>-->	
		</div>
		
	</ion-content>
	
	<ion-footer-bar class="bar-balanced">
		<div class="title">Footer</div>
	</ion-footer-bar>
</body>
</html>