上少下多的有序排列弹性布局
Posted ganmy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了上少下多的有序排列弹性布局相关的知识，希望对你有一定的参考价值。
期望实现有序排列如下：
思路: 用到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;
width: 150rpx;
height: 190rpx;
margin-bottom: 50rpx;
}
.avatar3-tag {
width: 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 {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
background: red;
position: absolute;
top: 0;
left: 10rpx;
}
.winner3 {
font-size: 30rpx;
text-align: center;
width: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
以上是关于上少下多的有序排列弹性布局的主要内容，如果未能解决你的问题，请参考以下文章