Ionic：自定义离子列表项答案

【问题标题】：Ionic: Custom ion list itemsIonic：自定义离子列表项
【发布时间】：2016-09-02 12:10:57
【问题描述】：

我是 Ionic 框架的新手，我正在尝试创建一个如图所示的离子列表，但我不知道如何在一个项目中使用 item-thumbnail-right 和 item-avatar右上角和图片中的伪页脚...... 我试过这段代码：

<ion-list>
    <a class="item item-thumbnail-right" ng-repeat="activeOffer in activeOffers"
         ng-href="#/app/offers/{{activeOffer.offer.id}}">
        <img ng-src="{{siteRoot}}/upload/assets/img/media-support/{{activeOffer.mediaSupport.fileName}}">
        <div class="item item-avatar">
            <img ng-src="{{siteRoot}}/upload/assets/img/localbusiness/{{activeOffer.localBusiness.logo}}">
            <h2>{{activeOffer.localBusiness.label}}</h2>
            <p>{{activeOffer.localBusiness.description}}</p>
        </div>
        <h2>{{activeOffer.offer.title}}</h2>
        <p>{{activeOffer.offer.description}}</p>
    </a>
</ion-list>

但是，我得到了一些丑陋的东西

【问题讨论】：

在这样的情况下，人们不会回复完整的解决方案，您也不应该期望我们这些人有时只会用小代码引导开发人员编写方式。 “我检查过你正在努力解决的问题，它只属于 css 部分，你需要了解如何正确使用不同的类以及调用它们的顺序，这样它们就不应该覆盖彼此的属性。” BOL
@jemlifathi 你解决了吗？

标签： css html ionic-framework ionic-view

【解决方案1】：

试试下面的例子：

<ion-item class="item-remove-animate item-avatar-right" ng-repeat="item in listingData.app" type="item-text-wrap" href="#/tab/restaurant_category/{{item.rest_id}}">
    <img ng-src="{{item.logo}}">
    <img src="" style="float:left;width: 15px;height: 15px;">
    <h2>{{item.restaurant_name}}</h2>

    <p ng-repeat="cuisne in item.available_cuisine.cuisine">{{cuisne.name}}</p>
    <div class="row order-policy-time">

        <div class="col col-50">
            <p>delivers in 60 min</p>
        </div>
        <div class="col text-right">
            <p>collection in 30 min</p>
        </div>
    </div>
    <div class="welcome-custom-icon">
        <span class="ti-angle-right"></span>
    </div>
</ion-item>

【讨论】：