zoukankan      html  css  js  c++  java
  • 上少下多的有序排列弹性布局

    期望实现有序排列如下:

    思路: 用到flex弹性布局(flex-direction:row-reverse; flex-wrap: wrap-reverse)+order属性(单个头像、序号、姓名在此看成一个元素模块先不管),

    1. 如果用flex-direction: row; flex-wrap: wrap,不用order属性,排序出来是酱紫的:

    2.如果用flex-direction:row;flex-wrap: wrap-reverse,不用order属性,排序出来是酱紫的:

    3.如果用flex-direction:row-reverse;flex-wrap: wrap-reverse,不用order属性,排序出来是酱紫的

    先贴wxss代码片段:

    .prize3-flex {

      display: flex;

      flex-direction: row-reverse;

      flex-wrap: wrap-reverse;

      justify-content: space-around;

    }

    .prize3-box {
      margin: 0 30rpx 20rpx;
    }

    .prize3 {
      position: relative;
       150rpx;
      height: 190rpx;
      margin-bottom: 50rpx;
    }

    .avatar3-tag {
       40rpx;
      height: 40rpx;
      background: #d159f4;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      font-size: 28rpx;
      position: absolute;
      top: 10rpx;
      z-index: 1;
      left: 0;
    }

    .avatar3 {
       140rpx;
      height: 140rpx;
      border-radius: 50%;
      background: red;
      position: absolute;
      top: 0;
      left: 10rpx;
    }

    .winner3 {
      font-size: 30rpx;
      text-align: center;
      150rpx;
      position: absolute;
      top: 160rpx;
    }

    再贴wxml片段:因数据为动态绑定,故将order赋值也是动态的。此方法同样适用于h5页

    <view class="prize3-box prize3-flex">
        <view class="prize3" wx:if="{{item.rank !== 1 && (item.rank !== 2) && (item.rank !== 3)}}"
    style="order: {{-item.rank}}; -webkit-order: {{-item.rank}}"  //为了辨识,我将其加粗,用-webkit-order是为了兼容ios8等较老版本机型
                 wx:for="{{resultData.list}}" wx:key="{{item.rank}}">
          <view class="avatar3-tag">{{item.rank}}</view>
          <image src="{{item.headimgurl}}" class="avatar3"></image>
          <view class="winner3 font-color-fff">{{item.name}}</view>
        </view>
      </view>

    PS: order属性 http://www.runoob.com/cssref/css3-pr-order.html

  • 相关阅读:
    Linux异常现场--pt_regs浅析
    内核调试--确认结构体的size和结构体成员的偏移
    Linux内核中root_domain的建立与初始化
    solr学习笔记-全量更新与增量更新,去除html标签
    oracle 替换clob里面的某个特定的字符串
    oracle重置序列从1开始
    oracle提取汉字拼音首字母
    layer.open的yes函数中获取弹出层(子集iframe)中的元素或参数
    java.util.Date日期时间工具类
    js操作将数字转换成 , 逗号分割的字符串并追加‘万’字
  • 原文地址:https://www.cnblogs.com/ganmy/p/9379306.html
Copyright © 2011-2022 走看看