我正在开发一个如下所示的应用程序:http://codepen.io/anon/pen/vNOVvb
我正在使用 ion-scroll 对图像列表进行水平滚动。 ion-scroll 工作正常，正如我想要的那样。但问题是用户在 ionic 滚动上拖动时无法垂直滚动到整个页面。
如何让父页面垂直滚动在 ion-scroll 上工作？
我在 codepen.io 上的示例代码:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!-- ionic/angularjs js -->
<link href="http://code.ionicframework.com/1.1.0/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.js"></script>
<!-- your app's js -->
<!--<script src="js/app.js"></script>
<script src="js/controllers.js"></script>-->
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
<!-- MENU Template -->
<script id="templates/menu.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/content1">
Content 1
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<!-- Content1 Template -->
<script id="templates/content1.html" type="text/ng-template">
<ion-view view-title="Content 1">
<ion-content>
<ion-item>
<div class="item-text-wrap mytitle">Title 1</div>
<ion-scroll direction="x" zooming="false">
<div>
<a class="foodImage" href="#"><div style="background-image: url(http://lorempixel.com/200/200/food?1)"> </div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?2)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?3)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?4)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?5)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?6)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?7)"></div></a>
</div>
</ion-scroll>
<div class="item-text-wrap mytitle">Title 2</div>
<ion-scroll direction="x" zooming="false">
<div>
<a class="foodImage" href="#"><div style="background-image: url(http://lorempixel.com/200/200/food?1)"> </div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?2)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?3)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?4)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?5)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?6)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?7)"></div></a>
</div>
</ion-scroll>
<div class="item-text-wrap mytitle">Title 3</div>
<ion-scroll direction="x" zooming="false">
<div>
<a class="foodImage" href="#"><div style="background-image: url(http://lorempixel.com/200/200/food?1)"> </div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?2)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?3)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?4)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?5)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?6)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?7)"></div></a>
</div>
</ion-scroll>
</ion-item>
</ion-content>
</ion-view>
</script>
</body>
</html>
CSS 文件
.mytitle{
margin-top:20px;
margin-bottom:20px;
}
.foodImage {
margin-right:10px;
}
.foodImage div{
display: inline-block;
width:200px;
height: 200px;
}
.foodImage div img{
height: 100%;
width: 100%;
}
Javascript:
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
//controller: 'AppCtrl'
})
.state('app.content1', {
url: '/content1',
views: {
'menuContent': {
templateUrl: 'templates/content1.html'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/content1');
});
最佳答案
只需在 Controller 中添加这段代码即可。
.controller('sampleviewctrl')
在 Controller 中注入(inject)这两个库 $timeout, $ionicScrollDelegate
$timeout(function(){
var sv = $ionicScrollDelegate.$getByHandle('horizontal').getScrollView();
var container = sv.__container;
var originaltouchStart = sv.touchStart;
var originalmouseDown = sv.mouseDown;
var originaltouchMove = sv.touchMove;
var originalmouseMove = sv.mouseMove;
container.removeEventListener('touchstart', sv.touchStart);
container.removeEventListener('mousedown', sv.mouseDown);
document.removeEventListener('touchmove', sv.touchMove);
document.removeEventListener('mousemove', sv.mousemove);
sv.touchStart = function(e) {
e.preventDefault = function(){}
originaltouchStart.apply(sv, [e]);
}
sv.touchMove = function(e) {
e.preventDefault = function(){}
originaltouchMove.apply(sv, [e]);
}
sv.mouseDown = function(e) {
e.preventDefault = function(){}
originalmouseDown.apply(sv, [e]);
}
sv.mouseMove = function(e) {
e.preventDefault = function(){}
originalmouseMove.apply(sv, [e]);
}
container.addEventListener("touchstart", sv.touchStart, false);
container.addEventListener("mousedown", sv.mouseDown, false);
document.addEventListener("touchmove", sv.touchMove, false);
document.addEventListener("mousemove", sv.mouseMove, false);
});
Html页面应该是这样的
<ion-scroll has-bouncing="false" direction="x" zooming="false" delegate-handle="horizontal">
关于javascript - ionic ion-scroll 滚动父页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32470662/