Question

我正在使用离子框架2开发一个应用程序但是我在创建像这样的帖子列表时遇到了问题（已经完成了代码，但无法设置列表样式）

任何人都可以帮助我吗？多数民众赞成在我拥有的东西

<ion-list no-lines>
<ion-item *ngFor="let post of data">
  <div class="wrapper" style="background: url({{post.imgUrl}});
background-repeat: no-repeat;
background-size: cover;">
    <p>{{post.imgUrl}}</p>
    <p>{{post.title.rendered}}</p>
  </div>

</ion-item>


.feed .wrapper p {
background: -webkit-linear-gradient(rgba(30,87,153,0) 0%, rgba(0,22,177,1) 100%);
background: -o-linear-gradient(rgba(30,87,153,0) 0%, rgba(0,22,177,1) 100%);
background: linear-gradient(rgba(30,87,153,0) 0%, rgba(0,22,177,1) 100%); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#0016b1',GradientType=0 );
bottom: 0;
color: white;
font-family: Roboto;
font-size: 1.25em;
left: 0;
padding: 0.25em 0.75em;
position: absolute;
text-overflow: ellipsis;
top: 75%;
line-height: 120px;

}

Uefa euro 2016 app

Answer 1

为此，您可以使用 Ionic Card CSS components 。

卡近年来已被广泛使用。他们是一个很好的方式包含和组织信息，同时也设置可预测对用户的期望。卡片可以很容易地显示相同的内容跨多种不同屏幕尺寸的视觉信息。他们允许更多控制，灵活，甚至可以动画。卡是通常放在一起，但它们也可以像一个＆＃34;页面＆＃34;并在左右之间滑动。

图像可以与列表和其他元素结合使用。

<div class="list card">

  <div class="item item-avatar">
    <img src="avatar.jpg">
    <h2>Pretty Hate Machine</h2>
    <p>Nine Inch Nails</p>
  </div>

  <div class="item item-image">
    <img src="cover.jpg">
  </div>

  <a class="item item-icon-left assertive" href="#">
    <i class="icon ion-music-note"></i>
    Start listening
  </a>

</div>

我在创建像这样的Feed时遇到了麻烦

1 个答案: