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

在混合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
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值