作者：小马不小 | 来源：互联网 | 2023-05-21 14:16
在我正在制作的项目中,我使用离子滚动两次并且工作完美(垂直模式)但是现在我正在尝试进行水平滚动并且不工作,滚动出现但我不能滚动任何东西.
HTML代码很简单:
和CSS:
.box {
width: 60vw;
height: 10vh;
border: 1px solid black;
}
.box > * {
display: inline-block;
margin-right: 4vw;
width: 20vw;
height: 10vh;
background: red;
}
有什么建议吗？我做错了什么？我错过了什么？
提前致谢
1> wabregoc..：
查看此codepen示例,编辑它并将其更改为您的样式.
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;
}
Hello!
Loading...
Toggle me to toggle loading!
京公网安备 11010802041100号