Ionic 3 ion-list Horizontal - 想要显示一个列表 ion-list Horizontal答案

【问题标题】：Ionic 3 ion-list horizontal - want to show a list ion-list horizontalIonic 3 ion-list Horizontal - 想要显示一个列表 ion-list Horizontal
【发布时间】：2020-01-09 18:07:51
【问题描述】：

我想使用 Ionic 3 ion-list（或 Ionic 3 中的任何功能）来显示水平列表，而不是典型的垂直列表。

寻找解决方案无需大量 css 或难以维护的代码。

        <ion-content>

          <ion-list >
            <ion-item *ngFor="let data of dataArray"  (click)="dataDetail(data)">
              <ion-thumbnail item-left>
                <img src="https://data.url.com/{{data.path}}{{data.photoName}}"/>
              </ion-thumbnail>
              <h2>{{data.name}}</h2>
              <p>{{data.details}}</p>
            </ion-item>
          </ion-list>

        </ion-content>

非常感谢任何帮助。

谢谢菲尔

【问题讨论】：

如果将oyl-list {display: block; width: auto; float:left;} 放入组件的 scss 中很多且难以维护，请务必不要。顺便说一句：你甚至可以在没有宽度和显示的情况下逃脱......
该死，将“oyl-list”替换为“ion-item”，我只是从我的代码中复制并没有太多注意，而 Stackoverflow 只允许我在 5 分钟内进行编辑...... :-$

标签： ionic-framework ionic2 ionic3

【解决方案1】：

你可以这样做。这对我有用。

HTML

<ion-grid>
<ion-row>
  <ion-col col-33 *ngFor="let post of list">
 <div class="card card-1" (click)="ondemand_details(post.product_final_categories_id)">
   <img src="{{post.product_final_categories_icon}}">
    <p style="font-size: 9px;">{{post.product_final_categories_name}}</p>
   </div>
   </ion-col>
</ion-row>

而 SCSS 是：

img1 {
border: 2px solid #BA55D3;
border-radius: 50%;
padding: 5px;
width: 50px;
background-color:#4B0082;
box-shadow: 1px 1px 1px 1px yellow;
}
.card {
 background: #1E90FF;
 border-radius: 50%;
 display: inline-block;
 height: 50px;
 border: 1px solid #fff;
 padding: 7px;
 margin: 1rem;
 position: relative;
 width: 50px;
 }
.card-1 {
 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  }
 .card-1:hover {
 box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  }

您可以根据需要更改代码。如果您遇到任何问题，请告诉我。

希望这对你有帮助。

更新水平滚动 html:

 <ion-content padding>
<ion-item>

   <ion-scroll scrollX style="height:100px;">
  <div class="scroll-item">
  <ion-col col-33 *ngFor="let post of list">
 <div class="card card-1" (click)="ondemand_details(post.product_final_categories_id)">

   <img src="{{post.product_final_categories_icon}}">
    <p style="font-size: 9px;">{{post.product_final_categories_name}}</p>
   </div>
    </ion-col>
   </div>
   </ion-scroll>

</ion-item>
</ion-content>

添加 SCSS：`

ion-scroll[scrollX] {
white-space: nowrap;
.scroll-item {
display: inline-block;
}}

我已经在我的项目中对其进行了测试，并且效果很好。它会显示类似这样的输出。

我希望这会对你有所帮助。

【讨论】：

感谢您的帮助。我确实试过了。它不像列表那样滚动，但它确实显示为水平，这很酷。
如何使水平网格滚动通过列表？现在它只显示列表中 21 个结果中的 4 个。
嗨，@philipfwilson 我更新了水平滚动。我已经在我的项目中进行了测试，并且工作正常。
今天正在处理这个问题。我会尽快回复你。谢谢菲尔
还有一个问题.. 如何减少列表中的垂直间距。这个列表的顶部有很多空间。

【解决方案2】：

sample.html:-    
<ion-content>

        <ion-scroll scrollX style="height:220px;">
          <ion-card class="scroll-item" padding *ngFor="let test of testlist"> - you will here dynamic list

            <--You will set here your list-->
            <ion-row style="font-size: 25px;">
             <p *ngIf="test.cust_name"><b> {{test.cust_name}} </b></p>  
            </ion-row>

            <ion-row>
              <p *ngIf="test.demo_car_id">{{test.demo_car_id[1]}}</p>
            </ion-row>

            <ion-row>
             <p *ngIf="test.location"> {{test.location}} </p>
            </ion-row> 
          </ion-card>
        </ion-scroll>
    </ion-content>

In the above list set as per your list. I was used ioncard inside ionscroll. 

sample.scss:-
ion-scroll[scrollX] {
        white-space: nowrap;
        .scroll-item {
        display: inline-block;
        }
    }

Thats all. Enjoy your coding.

【讨论】：