更新记录

1.0.0（2025-01-03） 下载此版本

1.0.0 首次发布

平台兼容性

本插件基于黄河爱浪 改版为Vue3

组件功能和 V2 版本一致，还可以与 z-paging 分页组件配合使用。

源码中有详细的注释，请各位开发者按个人需求自行修改。

对使用有疑问，可以先导入 [示例项目] 学习 页面与组件的使用流程

如何使用

导入组件

<waterfall ref="waterfallRef" :hideList="hideList" @statusChange="handleStatusChange" imageKey="imgUrl">
            <template v-slot:default="{ list, colWidth }">
                <waterfall-col v-for="(colItem, colIndex) in list" :key="colIndex" :colWidth="colWidth">
                    <template>
                        <waterfall-item v-for="(item, index) in colItem" :key="item.__waterfall_renderId" :colIndex="colIndex" :reportHeightTime="item.__waterfall_reportHeightTime" @height="onRenderHeight" >

                        </waterfall-item>
                    </template>
                </waterfall-col>
            </template>
            <template #tips>
                <view class="load-txt">
                    <view v-if="hideList">
                        <template v-if="waterfall.status === 'fail'">
                            <image src="/static/waterfall/fail.png" mode="aspectFit"></image>
                            <view>数据异常</view>
                        </template>
                        <template v-else-if="waterfall.status === 'empty'">
                            <image src="/static/waterfall/empty.png" mode="aspectFit"></image>
                            <view>暂无内容</view>
                        </template>
                    </view>
                    <view v-else style="padding-top: 30rpx">加载中</view>
                </view>
            </template>
        </waterfall>

具体逻辑可参考示例项目

// 瀑布流组件
import Waterfall from '@/uni_modules/morax-waterfall/components/morax-waterfall/waterfall-list.vue';
import WaterfallCol from '@/uni_modules/morax-waterfall/components/morax-waterfall/waterfall-col.vue';
import WaterfallItem from '@/uni_modules/morax-waterfall/components/morax-waterfall/waterfall-item.vue';
// 处理瀑布流渲染状态
const handleStatusChange = (status) => {
    if (status === 'RENDER_END') {
        waterfall.renderEnd = true;
    } else {
        waterfall.renderEnd = false;
    }
};
// 监听渲染高度，此事件为必用
const onRenderHeight = (e) => {
    const { colIndex, height, reportHeightTimeChange } = e;
    // 上报当前高度，上报后会自动触发下一项数据的渲染
    waterfallRef.value.reportHeight({
        colIndex,
        height,
        reportHeightTimeChange
    });
};

详细具体文档可参考 传送门，点击查看

感谢 黄河爱浪。