vue3+uniapp瀑布流

Vue3 + UniApp 瀑布流布局是一种常见的前端动态展示组件，它常用于图片轮播、商品列表等场景，让内容按照瀑布式的方式向下流动，看起来更为美观和节省空间。在 Vue3 中，可以结合 Element UI 或者自定义的 CSS Grid 或 Flexbox 实现瀑布流效果，UniApp 提供了丰富的样式库和组件，使得操作变得更加简单。

以下是创建一个简单的 Vue3 + UniApp 瀑布流组件的基本步骤：

1. 安装依赖：如果你打算使用 Element UI，先安装 `vue-element-ui`；如果直接用 CSS，那么需要了解 CSS 的 flex 或 grid 模块。

npm install uni-app element-ui -D

2. 创建组件模板：使用 `<template>` 部分定义结构，包含一个列表容器和每个元素的卡片容器。

<template>
  <view class="waterfall-container">
    <div v-for="(item, index) in items" :key="index" :class="{ active: isItemActive(index) }" ref="list">
      <view class="item-card" @click="selectItem(item)">
        <!-- 内容如图片、文字 -->
      </view>
    </div>
  </view>
</template>

3. CSS 样式设置：利用 CSS 的 flex 或 grid 属性实现瀑布流布局，比如使用 `.item-card { flex: 0 0 calc(100% / (grid列数));}` 来控制宽度。

4. 数据绑定和方法实现：在 `<script>` 部分，管理数据列表 `items`，并实现选择项的逻辑以及激活状态的切换。

<script setup>
import { ref, onMounted } from 'vue'

const items = ref([])
const activeIndex = ref(0)

// 激活当前显示的卡片
function selectItem(item) {
  activeIndex.value = items.value.indexOf(item)
}

onMounted(() => {
  // 初始化数据或从服务端获取数据
})
</script>