个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
在我正在制作的元素中，我使用了 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;
}
有什么建议吗？我做错了什么？我错过了什么？
提前致谢
最佳答案
查看此 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>关于css - 水平 ionic 卷轴不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28587396/
25
4
0
好吧，我有这个静态的导航菜单，但我想让它在用户向下或向上滚动他的页面时流畅地流动...请帮助编写代码，因为我已经尝试过做一些事情，但一切都变坏了。 代码:
我有两个 ionic 滚动标签。在每个 ion-scroll 标签中都有一个列表。这些列表中的每一个都以 10 个项目开始，当用户到达特定 ionic 卷轴的底部时，它应该加载更多。我面临的问题是这无
我的 ionic 应用程序中有一个看起来像这样的模板: {{ monthName }} ... 类为“nav”的
我拼命地试图将目标 div 保持在 float 菜单栏下方。正确的做法是什么？ $(document).ready(function () { $('a[href^="#"]').on('cl
我在 silverstripe 网站上运行了无限的 ajax 滚动。我还运行了“NoneLeft”扩展，让人们知道，他们到达了底部。 IAScroll 在 ArticleHolder 页面中显示 Ar
我是一名优秀的程序员,十分优秀！