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

aitangyong

于 2016-03-17 11:35:59 发布

阅读量2.1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ionic 文章标签： ionic左右滑动 html5画廊控件左右滑动导致页面难以滚动

本文链接：https://blog.youkuaiyun.com/aitangyong/article/details/50912066

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

混合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.p