首页 文章

离子3离子列表水平 - 想要显示列表离子列表水平

提问于
浏览 次
4

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

寻找解决方案 without a lot of css or hard to maintain code.

<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>

任何帮助都非常感谢 .

谢谢菲尔

ionic-framework ionic2 ionic3

1 回答

  • 4

    你可以这样做 . 这对我有用 . 我告诉你我的代码 .

    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);
  }

    您可以根据您的需求进行更改 . 如果您遇到任何问题，请告诉我 .

    希望这会帮助你 .

    Update horizental scroll 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;
}}

    我在我的项目中测试过，它的工作正常 . 它显示这样的输出 .

    enter image description here
    我希望这可以帮到你 .

    回复于

相关问题