• 上少下多的有序排列弹性布局


    期望实现有序排列如下:

    思路: 用到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

  • 相关阅读:
    GoogleTest 之路2-Googletest 入门(Primer)
    GoogleTest 之路1-Generic Build Instructions编译指导总方案
    Tinyhttpd 知识点
    栈初始化
    ARM S3C2440 时钟初始化流程
    GNU 关闭 MMU 和 Icache 和 Dcache
    bootloader 关闭看门狗
    bootloader svc 模式
    Uboot S3C2440 BL1 的流程
    GNU 汇编 协处理器指令
  • 原文地址:https://www.cnblogs.com/ganmy/p/9379306.html
Copyright © 2020-2023  润新知