You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
1.8 KiB
100 lines
1.8 KiB
<template>
|
|
<view class="waterfall-container">
|
|
<view class="waterfall-columns">
|
|
<!-- 左列 -->
|
|
<view class="waterfall-column">
|
|
<waterfallItem
|
|
v-for="(item, index) in leftColumnData"
|
|
:key="'left_' + index"
|
|
:item="item"
|
|
@click="handleItemClick"
|
|
@like="handleItemLike"
|
|
/>
|
|
</view>
|
|
|
|
<!-- 右列 -->
|
|
<view class="waterfall-column">
|
|
<waterfallItem
|
|
v-for="(item, index) in rightColumnData"
|
|
:key="'right_' + index"
|
|
:item="item"
|
|
@click="handleItemClick"
|
|
@like="handleItemLike"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import waterfallItem from './waterfallItem.vue'
|
|
|
|
export default {
|
|
components: {
|
|
waterfallItem
|
|
},
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
leftColumnData: [],
|
|
rightColumnData: []
|
|
}
|
|
},
|
|
watch: {
|
|
list: {
|
|
handler(newList) {
|
|
this.distributeItems(newList)
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
methods: {
|
|
// 将数据分配到左右两列
|
|
distributeItems(items) {
|
|
this.leftColumnData = []
|
|
this.rightColumnData = []
|
|
|
|
items.forEach((item, index) => {
|
|
// 简单的奇偶分配，也可以根据内容高度智能分配
|
|
if (index % 2 === 0) {
|
|
this.leftColumnData.push(item)
|
|
} else {
|
|
this.rightColumnData.push(item)
|
|
}
|
|
})
|
|
},
|
|
|
|
// 处理点击事件
|
|
handleItemClick(item) {
|
|
this.$emit('item-click', item)
|
|
},
|
|
|
|
// 处理点赞事件
|
|
handleItemLike(item) {
|
|
this.$emit('item-like', item)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.waterfall-container {
|
|
padding: 20rpx;
|
|
|
|
.waterfall-columns {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
|
|
.waterfall-column {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
}
|
|
</style>
|