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.展示效果

     

  • 相关阅读:
    js对象的深度克隆
    通用事件监听函数
    JavaScript封装
    Ajax
    MarkDown怎么在博客园展现出来
    MarkDown语法学习
    暑期培训第三周SDN总结
    暑期培训遇到的floodlight+mininet+ubuntu的问题
    Ubuntu14.04搭建mininet与可视化工具miniedit介绍
    Ubuntu 14.04 安装 Sublime Text 3,并用Sublime Text 3 安装Package Control
  • 原文地址:https://www.cnblogs.com/linsu/p/5870887.html
Copyright © 2011-2022 走看看