48 lines
1.5 KiB
Plaintext
48 lines
1.5 KiB
Plaintext
<template>
|
|
<scroll-view class="waterfall" scroll-y="true" :lower-threshold="100" @scrolltolower="onLoadMore">
|
|
<view class="columns">
|
|
<view class="col" v-for="(colItems, idx) in columns" :key="idx">
|
|
<block v-for="(item, i) in colItems" :key="item.id || i">
|
|
<slot name="item" :item="item"></slot>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<view v-if="loading" class="loading">加载中...</view>
|
|
<view v-if="!loading && noMore" class="no-more">没有更多了</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script lang="uts">
|
|
export default {
|
|
props: {
|
|
items: { type: Array, default: () => [] },
|
|
columnsCount: { type: Number, default: 2 },
|
|
loading: { type: Boolean, default: false },
|
|
noMore: { type: Boolean, default: false }
|
|
},
|
|
data() { return { columns: [] } },
|
|
watch: {
|
|
items: { handler() { this.reflow() }, deep: true }
|
|
},
|
|
created() { this.reflow() },
|
|
methods: {
|
|
reflow() {
|
|
const cols = []
|
|
for (let i = 0; i < this.columnsCount; i++) cols.push([])
|
|
for (let i = 0; i < this.items.length; i++) {
|
|
cols[i % this.columnsCount].push(this.items[i])
|
|
}
|
|
this.columns = cols
|
|
},
|
|
onLoadMore() { this.$emit('loadMore') }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.waterfall { padding:16rpx; background:transparent }
|
|
.columns { display:flex; gap:16rpx }
|
|
.col { flex:1; display:flex; flex-direction:column; gap:16rpx }
|
|
.loading, .no-more { text-align:center; color:#999; padding:20rpx }
|
|
</style>
|