zoukankan      html  css  js  c++  java
  • Ionic 列表、文本 自动 换行

    1.采用row 布局的row-warp 来处理

        <div class="item  item-icon-right">
           <span>图片相册</span>
           <i class="icon ion-images royal" data-tap-disabled="true" ng-click="taskXCpicker()"></i>
         </div>
       <div class="row row-wrap item-calm" >
         <div class="col col-50" ng-repeat="(k,v) in images"><img ng-src="{{v.imgurl}}"   style="120px;height:120px; "/>
           <p><button type="button" class="button button-small button-outline button-positive " ng-click="delimgs(v.imgurl)">删除</button></p></div>
         <div >
         </div>
       </div>

    2.采用css 样式 clearfix处理

    <div ng-if="showloading==false">
                <div>
                    <div class="col-48" ng-repeat="v in  portalListData">
                        <a href="#/product_content/{{v.Id}}">
                            <img src="{{ENV.imgUrl}}{{v.ImgUrl}}" alt="" />
                            <p class="product-title">{{v.Title}}</p>
                            <p class="product-price">
                                <span class="old-price"> ¥{{ v.MarkPrice }}</span>
                                <span class="now-price">特价: <span class="price">¥{{ v.SellPrice }}</span></span>
                            </p>
                        </a>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>

    3.文本超出自动换行显示 采用item-text-warp

     <div class="card">
          <div class="item item-divider">
           物品信息
          </div>
          <div class="item-text-wrap ">
            <div  class="item item-thumbnail-left" ng-repeat="o in orderDetails.order_goods">
              <!--<img  src="{{ENV.imgUrl}}{{o.ImgUrl}}" onerror="this.src='img/ionic.png'">-->
              <img  ng-src="{{ENV.imgUrl}}{{o.ImgUrl}}" />
              <h2>{{o.GoodsTitle}}</h2>
            <p >
              <span class="red"> ¥{{o.RealPrice}}</span></p>
          </div>
    
          </div>
        </div>

    4.展示效果

     

  • 相关阅读:
    杂记:高僧的炒股境界
    在Windows 7中使用tsmmc远程桌面
    VS2010初体验
    code4fun: one service,one config
    WCF进阶:将编码后的字节流压缩传输
    有高手想换工作的么?
    code4fun:host wcf service just in time
    evey的几张鼠绘
    说说WCF Rest
    外包一类似联众room的项目
  • 原文地址:https://www.cnblogs.com/linsu/p/5870887.html
Copyright © 2011-2022 走看看