<view class="imageContainer">
<view class="imageItem" v-for="(item, index) in columnData" :key="index">
<view v-for="(childItem, childIndex) in item" :key="childIndex" style="width: 100%"
:id="'item' + childItem._id" @click.stop="click(childItem)" class="deepItem">
<view class="img" style="margin-bottom: 5rpx;">
<image :src="childItem.img" class="smallImage"></image>
</view>
<view style="font-weight: bold; margin-bottom: 10rpx;font-size: 30rpx;">
{{childItem.name}}
</view>
<view
style="color: #C0C0C0;font-size: 24rpx; margin-bottom: 15rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
{{childItem.name_pw}}
</view>
<view class="startFlex">
<view class="littleDeliverItem">
<text style="color:#50AA62;font-size: 18rpx;">到店自提</text>
</view>
<view class="littleDeliverItem">
<text style="color:#FF6A6C;font-size: 18rpx;">快递到家</text>
</view>
</view>
<view class="betweenFlex">
<view class="left">
<text style="color: #FF6A6C;">¥</text>
<text
style="color: #FF6A6C;font-size:40rpx;font-weight: bold;margin-right: 10rpx;">{{childItem.price}}</text>
<text
style="color: #737373;text-decoration:line-through;">¥{{childItem.market_price}}</text>
</view>
<view class="right plusRightContainer">
<uni-icons type="plusempty" size="16" style="font-weight: bold;"></uni-icons>
</view>
</view>
</view>
</view>
</view>
data() {
return {
goodsList: [],
column: 2,
columnData: [],
columnWidth: 0,
};
},
methods:{
//计算每列的高度
getElemHeight(index) {
this.$nextTick(() => {
var arr = [];
this.goodsList.map((item, index) => {
uni.getImageInfo({
src: item.img,
success: (e) => {
item.height = (e.height * (this.columnWidth / e.width)) * 2 +
'rpx'
uni.createSelectorQuery().select('#item' + item.id)
.boundingClientRect(res => {
if (res !== null) {
arr.push({
...{
itemHeight: res.height
},
...item
});
if (arr.length == this.goodsList.length) {
this.columnData = this.distributeToNArrays(
arr,
this.column);
}
}
}).exec();
}
})
})
})
},
distributeToNArrays(arr, n) {
let sums = new Array(n).fill(0);
return arr.reduce(
(arrays, item) => {
let minSum = Math.min(...sums);
let minIndex = sums.indexOf(minSum);
arrays[minIndex].push(item);
sums[minIndex] += item.itemHeight;
return arrays;
},
new Array(n).fill().map(() => []),
)
},
setColumnWidth() {
let width = uni.getSystemInfoSync().windowWidth
this.columnWidth = Math.floor(width / this.column)
},
setData() {
const resultArray = this.goodsList.reduce(
(acc, cur, index) => {
const targetIndex = index % this.column;
acc[targetIndex].push(cur);
return acc;
},
Array.from(Array(this.column), () => []),
);
this.columnData = resultArray
this.getElemHeight()
},
click(item) {
console.log(item)
uni.navigateTo({
url:"/subPackage/goodDetail/goodDetail",
})
},
}
来看效果图