wxml
<view class="discuss-container">
<view class="left-box">
<template wx:for="{{leftList}}" is="item" data="{{...item}}"></template>
</view>
<view class="right-box">
<template wx:for="{{rightList}}" is="item" data="{{...item}}"></template>
</view>
</view>
<view wx:if="{{finish}}">
已经加载完了
</view>
<template name="item">
<view class="item">
<image mode="widthFix" src="{{coverImgUrl}}"></image>
<view class="title">{{title}} <van-icon name="chat-o" bind:tap="skipChat" data-id="{{postsId}}" /></view>
</view>
</template>
wxss
.discuss-container {
display: flex;
}
.left-box,
.right-box {
width: 50%;
box-sizing: border-box;
}
.item {
padding: 10rpx 15rpx;
animation: fly 1s ease;
}
.item image {
width: 100%;
}
.title {
text-align: center;
}
@keyframes fly {
from {
transform: translateY(100rpx);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
image{
width: 320px;
/* height: 60px; */
}
js文件
import { getPostsList } from '../../utils/api'
Page({
data: {
list: [],
leftList: [],
rightList: [],
leftHeight: 0,
rightHeight: 0,
finish: false,
},
pageNum: 1,
flag: false,
initData() {
if (this.data.finish) {
return
}
getPostsList(this.pageNum, 15).then(res => {
console.log(res);
this.data.list = this.data.list.concat(res.data.rows)
if (this.pageNum * 15 >= res.data.total) {
this.setData({
finish: true
})
}
this.flag = false
this.handleList()
})
},
handleList() {
if (this.data.list.length === 0) {
this.flag = true
return;
}
const item = this.data.list.shift();
wx.getImageInfo({
src: item.coverImgUrl,
success: (res) => {
if (this.data.leftHeight <= this.data.rightHeight) {
this.data.leftList.push(item)
this.data.leftHeight += res.height / res.width;
} else {
this.data.rightList.push(item)
this.data.rightHeight += res.height / res.width;
}
this.setData({
leftList: this.data.leftList,
rightList: this.data.rightList
})
},
complete: () => {
this.handleList()
}
})
},
onLoad: function (options) {
this.initData();
},
onReady: function () {
this.pageNum++;
this.initData();
},
onShow: function () {
},
onHide: function () {
},
onUnload: function () {
},
onPullDownRefresh: function () {
console.log(11111);
this.setData({
leftList: [],
rightList: [],
})
this.initData();
},
onReachBottom: function () {
if (this.flag) {
this.pageNum++;
this.initData();
}
},
onShareAppMessage: function () {
},
skipChat(e) {
wx.navigateTo({
url: '/pages/chatroomDetail/chatroomDetail?id=' + e.currentTarget.dataset.id,
})
}
})