更新记录

1.0.0（2025-11-11） 下载此版本

基础功能发布

• 新增：基于 Vue 3 Composition API 实现的瀑布流组件。
• 新增：支持 H5、App 和微信小程序等主要平台。
• 新增：使用 uni-app 的 createSelectorQuery 进行动态高度计算，确保项目正确分列。
• 新增：支持具名插槽（微信小程序）和作用域插槽（H5/App）两种方式传入自定义内容。
• 新增：暴露 notify 事件，用于通知父组件瀑布流容器的最终高度，便于处理触底加载。
• 优化：采用 display: grid 进行基础布局，提升性能和兼容性。

平台兼容性

uni-app(3.7.12)

1. 瀑布流布局 (WfGridFlow)

2. 插件 ID (Plugin ID)

3. 简介 (Brief Introduction)

4. 标签 (Tags)

5. 插件版本 (Version)

6. 更新日志 (Changelog)

### 1.0.0 基础功能发布

* **新增:** 基于 Vue 3 Composition API 和 `<script setup>` 语法实现核心组件。
* **布局:** 采用 CSS Grid 布局和 `1fr` 弹性宽度，实现简洁、高性能的双列布局。
* **兼容性:** 完美兼容 H5、App 和微信小程序，通过预编译指令 (`#ifdef MP-WEIXIN`) 区分处理具名插槽。
* **核心逻辑:** 使用 `uni.createSelectorQuery` 动态计算左右列高度，确保瀑布流排序准确性。
* **优化:** 针对 uni-app 环境，使用 `setTimeout(..., 0)` 解决页面渲染延迟导致的测量高度错误问题。

7. 插件使用说明 (Usage Instructions)

以下内容为 Markdown 格式的详细使用文档，您可以直接粘贴到插件市场的 "插件使用说明" 区域。

WfGridFlow 高性能瀑布流布局组件

概述

WfGridFlow 是一个基于 Vue 3 Composition API 和 uni-app Grid 布局实现的跨端瀑布流组件。它通过动态计算高度来决定项目插入左右哪一列，并提供完善的插槽机制和事件通知。

1. 引入组件

在您的页面 (.vue) 中导入和注册组件：

<script lang="ts" setup>
import WfGridFlow from "../../components/wf-grid-flow/wf-grid-flow.vue"; // 请根据您的目录结构修改路径
// ...
</script>

2. 基础使用 (模板)

由于微信小程序对具名插槽的特殊要求，使用时必须配合预编译指令 (#ifdef MP-WEIXIN) 来处理：

<template>
    <view>
        <WfGridFlow ref="wfListRef" :wfList="DataList" :updated="updated">
            <!-- #ifdef MP-WEIXIN -->
            <view class="wf-card" v-for="(item, index) in DataList" :key="index" :slot="`slot${item.customSId}`">
                <view class="card-content">
                    <image :src="item.image" mode="widthFix" class="card-image"></image>
                    <text class="card-title">{{item.title}}</text>
                </view>
            </view>
            <!-- #endif -->
            <!-- #ifndef MP-WEIXIN -->
            <template v-slot="{ item }">
                <view class="wf-card">
                    <view class="card-content">
                        <image :src="item.image" mode="widthFix" class="card-image"></image>
                        <text class="card-title">{{item.title}}</text>
                    </view>
                </view>
            </template>
            <!-- #endif -->
        </WfGridFlow>
    </view>
</template>

3. Props 属性说明

4. Events 事件说明

5. 注意事项

1. 数据结构：wfList 中的每个数据项 必须 包含一个唯一的标识符（customSId 或 id），这对微信小程序具名插槽的正确渲染至关重要。
2. 样式问题：瀑布流能否正确显示并计算高度，完全依赖于您在插槽中定义的卡片样式。请确保卡片内部的图片和内容能够自适应宽度：

   .card-image {
       width: 100%; /* 必须设置，确保图片撑满列宽 */
       display: block;
   }
   /* 外部的 wf-card 样式也需注意，不能设置固定宽度 */

3. 重新加载/刷新：在执行下拉刷新操作时，请务必在获取到新的列表数据后，将 updated Prop 设为 true (然后在下一次数据更新后设为 false)，以触发组件的重置逻辑。