离子滚动不会垂直滚动

所以我在我的页面上添加了2个离子滚动。示例代码在这里：http://codepen.io/anon/pen/QNNExR 离子滚动不会垂直滚动

第一个离子滚动正常工作，我可以左右滚动。

第二个离子滚动，其中有很多'测试'段。我不能垂直滚动（上 - 下）。一旦我比屏幕高度更深一点，它总是反弹回来。

注意：我没有设置高度离子滚动或离子滚动内容，因为高度不固定（例如：离子滚动高度取决于屏幕大小，应填充屏幕高度和内容的其余部分身高取决于内容长度）

我做错了什么？谢谢。

<html ng-app="ionicApp"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Ionic vertical and horizontal Scroll</title> 

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 

    </head> 
    <body ng-controller="MyCtrl"> 

    <ion-header-bar class="bar-positive"> 
     <h1 class="title">Ionic vertical and horizontal Scroll</h1> 
    </ion-header-bar> 

<ion-pane> 
    <ion-content> 
<div> 
      <ion-scroll zooming="false" direction="x" scrollbar-x="false" scrollbar-y="false" has-bouncing="true" style="width: 100%;"> 
      123 
      </ion-scroll> 
    </div> 

<div> 
<ion-scroll zooming="false" direction="y" style="width: 100%; height: 100%"> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
     <p>test</p> 
</ion-scroll> 
</div> 
    </ion-content> 
</ion-pane> 

    </body> 
</html>

来源

2016-03-08 innek

-1

与$ionicScrollDelegate加入这个在你的控制器，$timeout注射器：

$timeout(function(){ 
    //return false; // <--- comment this to "fix" the problem 
    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); 
    }); 
    $timeout(function(){ 
    //return false; // <--- comment this to "fix" the problem 
    var sv = $ionicScrollDelegate.$getByHandle('horizontal2').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); 
    });

来源

2016-08-28 11:36:17

那么这是什么呢？发布代码通常并不是那么有用，发布*解释*通常是！ – Carpetsmoker

将此代码添加到您的控制器中，离子开发人员知道这个 –

这不是一个解释。 – Carpetsmoker

离子滚动不会垂直滚动

回答

相关问题