完成consumer端同步

components/consumer/WaterfallList.uvue

@@ -0,0 +1,47 @@
+<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>