水平离子卷轴不起作用

Question

在我正在制作的项目中，我使用了 ion-scroll 两次并且工作完美（垂直模式）但现在我正在尝试进行水平滚动并且不起作用，滚动出现但我无法滚动没什么。

HTML代码很简单：

<ion-scroll direction="x" class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</ion-scroll>

和CSS：

.box {
    width: 60vw;
    height: 10vh;
    border: 1px solid black;
}

.box > * {
   display: inline-block;
   margin-right: 4vw;
   width: 20vw;
   height: 10vh;
   background: red;
}

有什么建议吗？我做错了什么？我错过了什么？

提前致谢

Answer 1

查看此 codepen example，对其进行编辑并将其更改为您的风格。

angular.module('ionicApp', ['ionic'])

.controller('MainCtrl', ['$scope', function($scope) {
  $scope.data = {
    isLoading: false
  };
  
  
}]);

.wide-as-needed {
  overflow: scroll;
  white-space: nowrap;
}
.scroll { 
  min-width: 100%;
}
.bar.bar-loading {
  display: block;
  height: 24px;
  
  /* starts right below a normal header */
  top: 44px;
  
  /* make the text centered vertically and horizontally */
  text-align: center;
  padding: 0;
  line-height: 24px;

  /* transition 'sliding down' (check below)*/
  -webkit-transition: 200ms all;
}


/* 
 * make the content's top changes animate.
 * might not always look good, but looks
 * good when our loader is added & removed
 */
.has-header {
  -webkit-transition: 200ms top;
}
.has-header.has-loading {
  /* 44px (header) + 24px */
  top: 68px;
}

/* make loading bar slide up/down */
.bar-loading.ng-enter,
.bar-loading.ng-leave.ng-leave-active {
  height: 0;
  border-width: 0px;
}
.bar-loading.ng-enter.ng-enter-active,
.bar-loading.ng-leave {
  height: 24px;
  border-width: 1px;
}

<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 Modal</title>

    <link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    
    <ion-header-bar class="bar-positive">
      <h1 class="title">Hello!</h1>
    </ion-header-bar>
    <ion-header-bar class="bar-subheader">
      <ion-scroll direction="x" class="wide-as-needed">
        <a class="button inline-button">this is a button : 1</a>
        <a class="button">this is a button : 2</a>
        <a class="button">this is a button : 3</a>
        <a class="button">this is a button : 4</a>
        <a class="button">this is a button : 5</a>
        <a class="button">this is a button : 6</a>
        <a class="button">this is a button : 7</a>
        <a class="button">this is a button : 8</a>
        <a class="button">this is a button : 9</a>
        <a class="button">this is a button : 10</a>
        <a class="button">this is a button : 11</a>
        <a class="button">this is a button : 12</a>
        <a class="button">this is a button : 13</a>
        <a class="button">this is a button : 14</a>
        <a class="button">this is a button : 15</a>
        <a class="button">this is a button : 16</a>
        
        
        
      </ion-scroll>
    </ion-header-bar>
    <div class="bar bar-loading bar-assertive" ng-if="data.isLoading">
      Loading...
    </div>
    <ion-content ng-class="{'has-loading': data.isLoading}">
      <ion-toggle ng-model="data.isLoading">Toggle me to toggle loading!</ion-toggle>
    </ion-content>
    
  </body>
</html>

Answer 2

我遇到了同样的问题 - 水平滚动在 iOS 上工作正常，但在 android 上根本不工作。看来这是离子的错误： https://github.com/driftyco/ionic-v1/issues/193 我正在使用 ionic 1.3.2，但看起来它在 2.x 中仍然是一个问题。

我可以通过向 ion-scroll 元素添加 overflow-scroll="false" 来修复它。

水平离子卷轴不起作用

Horizontal ion-scroll not working

html

css

scroll

ionic-framework