水平离子滚动不起作用 [英] Horizontal ion-scroll not working
本文介绍了水平离子滚动不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我正在制作的项目中，我使用离子滚动两次并且工作完美（垂直模式）但是现在我正在尝试进行水平滚动并且不起作用，滚动出现但我无法滚动任何内容。
In the project that i am making i used ion-scroll two times and works perfect (vertical mode) but now i am trying to do an horizontal scroll and is not working, the scroll appear but i can't scroll nothing.
HTML代码很简单：
The HTML code is simple:
<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;
}
有任何建议吗？我做错了什么？我错过了什么？
Any suggestion? i am doing something wrong? i am missing something?
提前致谢
推荐答案
查看此内容 codepen示例，编辑并更改为您的风格。
View this codepen example, edit it and change it to your style.
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>
这篇关于水平离子滚动不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
