文章/答案/技术大牛

发布

社区首页 >问答首页 >ion ion-scroll滚动父页面

问ion ion-scroll滚动父页面
EN

Stack Overflow用户

提问于 2015-09-09 11:57:47

回答 1查看 609关注 0票数 1

我正在开发一个类似这样的应用程序：http://codepen.io/anon/pen/vNOVvb

我正在使用离子滚动来做水平滚动的图像列表。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%;
            }

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');
});

angularjs

cordova

ionic-framework

javascript

css

回答 1

Stack Overflow用户

发布于 2016-08-28 19:39:44

只需将这段代码添加到您的控制器中。

.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">

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32470662

复制

相似问题

问ion ion-scroll滚动父页面
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ion ion-scroll滚动父页面EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ion ion-scroll滚动父页面
EN