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

     

  • 相关阅读:
    mysql数据库的基本操作:创建数据库、查看数据库、修改数据库、删除数据库
    CentOS7安装python3
    如何修改博客园的标题,文本,表格等的显示样式
    html:常见行内标签,常见块级标签,常见自闭合标签
    drupal 精彩文章
    DRUPAL8模版命名规则
    编写.info文件
    module.inc 模块
    drupal 内容类型
    drupal
  • 原文地址:https://www.cnblogs.com/linsu/p/5870887.html
Copyright © 2011-2022 走看看