Ionic 4使用ngFor实现水平滚动

Question

我有些不知所措。只使用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"
  },

- MacD

Answer 1

尝试在需要复制的实际元素上使用指令：

<div class="container">
    <div class="scroll" scrollX="true">
        <span *ngFor="let item of items | async">{{item.ProjectEvent}}</span>
    </div>
</div>

- Sergey Rudenko

---

这确实给了我一个水平渲染的列表，这是朝着正确方向迈出的一步！但是该列表会换行到下一行，而不是移动到屏幕外并滚动。 - MacD

没关系，那就成功了！！我已经注释掉了“container”CSS。非常感谢Sergey！ - MacD

Answer 2

使用弹性盒模型（flexbox）：

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

- Troy Michael

Answer 3

也许尝试一下

<ion-segment scrollable="true">
    <ion-segment-button value="friends">
      <ion-label>Friends</ion-label>
    </ion-segment-button>
</ion-segment>

- Wen Yi Xue

---

这应该是解决方案，但在撰写本文时，滚动条仅在PWA模式下使用shift + 滚动才有效，这非常不直观。 - pszaba