Ionic 3 ion-list Horizontal - 想要显示一个列表 ion-list Horizontal [英] Ionic 3 ion-list horizontal - want to show a list ion-list horizontal
问题描述
我想使用 Ionic 3 ion-list(或 Ionic 3 中的任何功能)来显示水平列表,而不是典型的垂直列表.
I want to use Ionic 3 ion-list (or whatever works in Ionic 3) to show a horizontal list instead of the typical vertical list.
寻找解决方案无需大量 css 或难以维护的代码.
Looking for a solution 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>
非常感谢任何帮助.
谢谢菲尔
推荐答案
这样就可以了.这对我有用.
You can do it in this way. This works for me.
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);
}
您可以根据需要更改代码.如果您遇到任何问题,请告诉我.
You can change the code according to your needs. If you face any problem please let me Known.
希望这对你有帮助.
更新水平滚动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;
}}
我已经在我的项目中对其进行了测试,并且效果很好.它会显示类似这样的输出.
I have tested it in my project, and it works fine. it will show output something like this.
我希望这会对你有所帮助.
I hope this will help you.
这篇关于Ionic 3 ion-list Horizontal - 想要显示一个列表 ion-list Horizontal的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!