ionic ion-scroll 滚动父页面
Posted
技术标签:
【中文标题】ionic ion-scroll 滚动父页面【英文标题】：ionic ion-scroll scroll parent page 【发布时间】：2015-12-04 21:33:04 【问题描述】：我正在开发一个看起来像这样的应用程序：http://codepen.io/anon/pen/vNOVvb
我正在使用 ion-scroll 对图像列表进行水平滚动。 ion-scroll 可以正常工作，就像我想要的那样。但问题是用户在拖动离子滚动时无法垂直滚动到整页。
如何让父页面垂直滚动在 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%;
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');
);
【问题讨论】：
看看这对你有没有帮助codepen.io/rajeshwarpatlolla/pen/xGWBja @mudasserajaz 非常感谢您提供的链接。试过了。它只适用于iphone，但不适用于android。此外，它经常遇到错误：Uncaught TypeError: Cannot read property 'apply' of undefined sv.mouseMove @ VM24752:12
【参考方案1】：
只需在您的控制器中添加这段代码。
.controller('sampleviewctrl')
在你的控制器 $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">
【讨论】：
以上是关于ionic ion-scroll 滚动父页面的主要内容，如果未能解决你的问题，请参考以下文章
ionic 横向滚动 ion-scroll 根据后台数据控制当前默认滑动到的位置