Waterfalls flow
This is the approximate effect
1. WXML
These are two complete sections. In fact, what is inside is not important. The important thing is the two outermost view tags:
<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>The abbreviation is this:
<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>It is equivalent to having a left column and a right column, and the ids are scroll-left and scroll-right respectively
2. WXSS
Originally, I put a div on the outer layer and then used flex layout. Later, I found that the flex layout would make the heights of pubu_left and pubu_right the same, so I couldn’t get the real-time height, so I used floating layout.
.pubu_left {
float: left;
}
.pubu_left {
float: right;
}3. 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 is used here to solve the asynchronous problem of boundingClientRect. If you don’t, you can go and see es6