瀑布流
这就是大概的效果
一、WXML
这个是完整的两个板块,其实具体里面是什么不重要,重要的是两个最外层的view标签:
<view class="pubu_left" id="scroll2-left">
<view class="photo_left_content" wx:for="{{random_left_content}}" bindtap="goDetail" data-id="{{item._id}}" style="color:{{bright2}}" wx:key="index" wx:index="index">
<image lazy-load="true" class="photo_image" src="{{item.firstImage.url}}" mode="widthFix"></image>
<view class="inform-container">
<view class="inform-title">{{item.title}}</view>
<view class="ava-name-like">
<view class="ava-name">
<image src="{{item.creator_inform.avatarUrl}}" class="inform-avatarUrl"></image>
<view class="name">{{item.creator_inform.nickName}}</view>
</view>
<view class="like" wx:if="{{item.userIsLike}}" catchtap="cancelLike" data-index="{{index}}" data-direction="left" data-id="{{item._id}}" data-publisheropenid="{{item.creator_inform.openId}}">
<image lazy-load="true" src="/image/smalllove-red.png"></image>
<text>{{item.like.length}}</text>
</view>
<view class="like" wx:else catchtap="addLike" data-index="{{index}}" data-direction="left" data-id="{{item._id}}" data-publisheropenid="{{item.creator_inform.openId}}">
<image lazy-load="true" src="/image/smalllove-white.png" ></image>
<text>{{item.like.length}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="pubu_right" id="scroll2-right">
<view class="photo_right_content" wx:for="{{random_right_content}}" bindtap="goDetail" data-id="{{item._id}}" style="color:{{bright2}}" wx:key="index" wx:index="index">
<image lazy-load="true" class="photo_image" src="{{item.firstImage.url}}" mode="widthFix"></image>
<view class="inform-container">
<view class="inform-title">{{item.title}}</view>
<view class="ava-name-like">
<view class="ava-name">
<image src="{{item.creator_inform.avatarUrl}}" class="inform-avatarUrl"></image>
<view class="name">{{item.creator_inform.nickName}}</view>
</view>
<view class="like" wx:if="{{item.userIsLike}}" catchtap="cancelLike" data-index="{{index}}" data-direction="right" data-id="{{item._id}}" data-publisheropenid="{{item.creator_inform.openId}}">
<image lazy-load="true" src="/image/smalllove-red.png"></image>
<text>{{item.like.length}}</text>
</view>
<view class="like" wx:else catchtap="addLike" data-index="{{index}}" data-direction="right" data-id="{{item._id}}" data-publisheropenid="{{item.creator_inform.openId}}">
<image lazy-load="true" src="/image/smalllove-white.png" ></image>
<text>{{item.like.length}}</text>
</view>
</view>
</view>
</view>
</view>
缩略就是这样:
<view class="pubu_left" id="scroll-left">
<view wx:for="{{arr1}}"><view/>
</view>
<view class="pubu_right" id="scroll-right">
<view wx:for="{{arr2}}"><view/>
</view>
等于是有左列和右列,id分别为scroll-left和scroll-right
二、WXSS
原本我是外层套一个div然后用flex布局的,后面发现flex布局会让pubu_left和pubu_right两个板块高度一样,这样就获取不到实时的高度了,所以我就用浮动布局了。
.pubu_left {
float: left;
}
.pubu_left {
float: right;
}
三、JS
const query = wx.createSelectorQuery()
let leftLength
let rightLength
for (let i = 0; i < arr.length; i++) {
//获取pubu-left的高度
leftLength = await new Promise((resolve,reject)=>{
query.select("scroll-left").boundingClientRect(res=>{
resolve(res.bottom)
}).exec()
})
//获取pubu-right的高度
rightLength = await new Promise((resolve,reject)=>{
query.select("scroll-right").boundingClientRect(res=>{
resolve(res.bottom)
}).exec()
})
//哪个长就插入哪里
if (leftLength <= rightLength) {
//插入pubu-left数组
} else if (leftLength > rightLength) {
//插入pubu-right数组
}
}
这里用了promise解决boundingClientRect异步问题,不会可以去看看es6