我很茫然。我可以使水平滚动仅与html和css一起正常工作,但是当我介绍ngFor时,它拒绝产生相同的效果。是否有人对此有经验,或者知道如何解决此问题?
这是我无法使用的简单代码:
此示例产生一个垂直列表:
<div class="container" *ngFor="let item of items | async">
<div class="scroll" scrollX="true">
<span>{{item.ProjectEvent}}</span>
</div>
</div>
这将产生一个可以水平滚动的宽容器
<div class="container" >
<div class="scroll" scrollX="true">
<span>item1</span>
<span>item2</span>
<span>item3</span>
<span>item4</span>
<span>item5</span>
<span>item6</span>
<span>item7</span>
<span>item8</span>
<span>item9</span>
</div>
</div>
两者的CSS相同:
.container {
width: 100px;
background-color: green;
overflow: hidden;
white-space: nowrap;
::-webkit-scrollbar {
display: none;
}
.scroll {
overflow: auto;
}
}
向我解释一下史波克先生!
谢谢您的帮助!
良好依赖关系:
"dependencies": {
"@angular/common": "^7.1.4",
"@angular/core": "^7.1.4",
"@angular/fire": "^5.1.1",
"@angular/forms": "^7.1.4",
"@angular/http": "^7.1.4",
"@angular/platform-browser": "^7.1.4",
"@angular/platform-browser-dynamic": "^7.1.4",
"@angular/router": "^7.1.4",
"@ionic-native/core": "5.0.0-beta.21",
"@ionic-native/splash-screen": "5.0.0-beta.21",
"@ionic-native/status-bar": "5.0.0-beta.21",
"@ionic/angular": "4.0.0",
"@ionic/pro": "2.0.4",
"core-js": "^2.5.4",
"firebase": "^5.8.0",
"ngx-navigation-with-data": "^1.0.2",
"rxjs": "~6.3.3",
"zone.js": "~0.8.26"
},
答案 0 :(得分:3)
尝试在需要复制的实际元素上使用伪指令:
<div class="container">
<div class="scroll" scrollX="true">
<span *ngFor="let item of items | async">{{item.ProjectEvent}}</span>
</div>
</div>
答案 1 :(得分:2)
也许尝试
<ion-segment scrollable="true">
<ion-segment-button value="friends">
<ion-label>Friends</ion-label>
</ion-segment-button>
</ion-segment>
答案 2 :(得分:0)
使用flexbox:
ctypes._SimpleCData
https://codeburst.io/how-to-create-horizontal-scrolling-containers-d8069651e9c6