更新记录

1.0.1（2024-12-25） 下载此版本

兼容h5，添加数据更新和渲染结束事件

1.0.0（2024-12-25） 下载此版本

实现简单好用的瀑布流

平台兼容性

uni-app

其他

瀑布流插件

本插件采用相对定位实现瀑布流效果

<template>
    <view class="container">
        <waterfall ref="waterfall" @onRenderEnd="">
            <template v-slot:default="{list}">
                <waterfall-item v-for="(item, index) in list" :key="index" :autoLoad="false" :top="item.top" :left="item.left"
                    :width="item.width" :visible="item.visible" :load="item.load" @shaping="onShaping($event, index)">
                    <!-- 自定义内容区域 -->
                    <view class="card" @click="onAdd(index, item)">
                        <view class="picture">
                            <image :src="item.picture" mode="widthFix" @load="onLoadImg(index)"></image>
                        </view>
                        <view class="content">
                            {{index}}-{{item.text}}
                        </view>
                        <view>{{item.count}}</view>
                    </view>
                </waterfall-item>
            </template>
        </waterfall>
    </view>
</template>

<script>
    import Waterfall from '@/uni_modules/bingo-waterfall/components/bingo-waterfall/waterfall.vue';
    import WaterfallItem from '@/uni_modules/bingo-waterfall/components/bingo-waterfall/waterfall-item.vue';

    export default {
        onPullDownRefresh() {
            this.$refs.waterfall.onReset();
            this.fetchList();
        },
        onReachBottom() {
            this.fetchList();
        },
        methods: {
            fetchList() {
                const list = [];
                const type = 'reset'; // reset:初次加载数据  inset:插入数据
                this.$refs.waterfall.onInject(list, type);
            },
            onShaping(height, index) {
                this.$refs.waterfall.onUpdateHeight(height, index);
            },
            onLoadImg(index) {
                // 仅在autoLoad为false时调用
                this.$refs.waterfall.onLoadItem(index);
            },
            onAdd(index, record) {
                record.count += 1;
                this.$refs.waterfall.onUpdateItem(index, record);
            },
            () {
                uni.stopPullDownRefresh();
                uni.hideLoading();
            }
        },
        components: {
            Waterfall,
            WaterfallItem
        }
    }
</script>

完美支持上拉加载更多和下拉刷新