带有ngFor的Ionic 4水平滚动
Posted
技术标签:
【中文标题】带有ngFor的Ionic 4水平滚动【英文标题】:Ionic 4 horizontal scroll with ngFor 【发布时间】:2019-06-22 03:07:20 【问题描述】:我很茫然。我可以只使用 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;
向我解释一下,Spock 先生!
提前感谢您的帮助!
良好度量的依赖关系:
"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"
,
【问题讨论】:
【参考方案1】:尝试在需要复制的实际元素上使用指令:
<div class="container">
<div class="scroll" scrollX="true">
<span *ngFor="let item of items | async">item.ProjectEvent</span>
</div>
</div>
【讨论】:
这实际上给了我一个水平渲染的列表,这是朝着正确方向迈出的一步!但列表会换行到下一行,而不是移出屏幕并滚动。 没关系,确实做到了!我已经注释掉了“容器”css。非常感谢谢尔盖!【参考方案2】:使用弹性框:
div[scrollx=true]
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
&::-webkit-scrollbar
display: none;
.scroll-item
flex: 0 0 auto;
https://codeburst.io/how-to-create-horizontal-scrolling-containers-d8069651e9c6
【讨论】:
【参考方案3】:不妨试试
<ion-segment scrollable="true">
<ion-segment-button value="friends">
<ion-label>Friends</ion-label>
</ion-segment-button>
</ion-segment>
【讨论】:
这应该是解决方案,但在撰写本文时,滚动仅适用于 PWA 模式下的 shift+scroll,这非常不直观以上是关于带有ngFor的Ionic 4水平滚动的主要内容,如果未能解决你的问题,请参考以下文章