![在这里插入图片描述](https://img-blog.csdnimg.cn/20210715142252572.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcxNDMyNQ==,size_16,color_FFFFFF,t_70#pic_center)
// list.wxml列表
<import src ="/template/cardList/cardList2.wxml"/>
<block>
<view id="left">
<view class="list-index list-index-{{plType}}" wx:for="{{ leftList }}" wx:key="key">
<navigator url="/pages/Main/pages/details/index?id={{item.id}}" hover-class="none">
<template data="{{ item }}" is="cardList2"/>
</navigator>
</view>
</view>
<view id="right">
<view class="list-index list-index-{{plType}}" wx:for="{{ rightList }}" wx:key="key">
<navigator url="/pages/Main/pages/details/index?id={{item.id}}" hover-class="none">
<template data="{{ item }}" is="cardList2"/>
</navigator>
</view>
</view>
</block>
// list.wxss部分样式
#left,#right{
width: 340rpx;
float: left;
}
#left{
margin-right: 24rpx;
margin-left:24rpx;
}
// list.js
let leftHeight = 0, rightHeight = 0; //分别定义左右两边的高度
let query,timers={};
Page({
onLoad(){
// 本示例实际项目 在列表操作中比较复杂,该环节省去了中间的数据接口
// 单个列表有倒计时
/*this.isLeft(this.data.datas,'djs')*/
let resArr = [];
for(let i in res.data.list){
resArr.push(res.data.list[i])
}
this.isLeft(resArr, '')
},
async isLeft(goods,dataType) {
let list = goods,
leftList = this.data.leftList,
rightList = this.data.rightList;
query = wx.createSelectorQuery().in(this)
// 倒计时更新数据列表状态
if (dataType == 'djs') {
await this.getBoxHeight(leftList, rightList);
}
else{
for (const item of list) {
leftHeight <= rightHeight ? leftList.push(item) : rightList.push(item); //判断两边高度,来觉得添加到那边
await this.getBoxHeight(leftList, rightList);
}
}
},
getBoxHeight(leftList, rightList) { //获取左右两边高度
return new Promise((resolve, reject) => {
this.setData({
leftList,
rightList
}, () => {
query.select('#left').boundingClientRect();
query.select('#right').boundingClientRect();
query.exec((res) => {
if (res[0] ){
leftHeight = res[0].height; //获取左边列表的高度
rightHeight = res[1].height; //获取右边列表的高度
}
resolve();
});
});
})
}
})
//cardList2.wxml组件
<template name="cardList2">
<view class="c-box rds _list cardList2">
<view class="img-box" style="height:345rpx">
<image class="imgLoad" mode="aspectFill" style="height:345rpx" src="{{ item.firstPic ? item.firstPic : '/images/imgLoad.png' }}" lazy-load="true" alt=""></image>
<block wx:if="{{item.state!=4}}">
<!-- 倒计时 -->
<view wx:if="{{ item.state==4.5}}" class="goodStateTip goodStateTipDJS">
<p class="fs13 num1 ai">
<image class="fs12" style="width:28rpx;height:28rpx;margin-right:2rpx;display:inline-block;" src="/images/biao.png" alt="" />
<i class="ing-end-time fs10">{{ item.time.h }}</i>
<b>:</b>
<i class="ing-end-time fs10">{{ item.time.m }}</i>
<b>:</b>
<i class="ing-end-time fs10">{{ item.time.s }}</i>
</p>
</view>
<view wx:else class="goodStateTip goodStateTipOther">{{ item.nowState }}</view>
</block>
</view>
<view class="text-box">
<view class="fs14 num2" style="height:80rpx;margin-bottom:20rpx;">{{item.title}}</view>
<view class="tips clear"
style="padding:0;margin-bottom:10rpx;"
wx:if="{{ item.rebate && item.state !=5 && item.state != 6 }}">
<li class="left fan red fs10 hongbao" style="padding:2rpx 10rpx;opacity:{{item.state==5.55 ? '0' : '1' }}">返<i class="fs10">¥</i><span class="n">{{ item.rebate }}</span></li>
</view>
<view class="ai" style="padding:6rpx 0;">
<view class="fs11 old-price hui">原价<i class="fs10">¥</i><span class="n">{{ item.originalPrice || 0 }}</span></view>
</view>
<view class="clear price-box ai">
<span class="left fs12 red now-price">¥<i class="fs16 bold"><span class="n">{{ item.sellingPrice || 0 }}</span></i></span>
<span class="right fs12 volume hui">已售<span>{{ item.salesVolume > 0 ? item.salesVolume : 0 }}</span></span>
</view>
</view>
</view>
</template>
// cardList2.wxss样式
略