JCSS / jcss-miniprogram

<template>
    <view class="u-waterfall">
        <!-- 新增支持多列布局 -->
        <view 
            v-for="(column, index) in columnList" 
            :key="index"
            :ref="`u-column-${index}`"
            :id="`u-column-${index}`"
            class="u-column"
        >
            <slot name="column"
                :colIndex="index" 
                :colList="column">
            </slot>
            <slot name="left"
                :colIndex="index" 
                :leftList="column">
            </slot>
            <template v-if="!$slots['left'] && !$slots['column']" v-for="(item, itemIndex) in column" :key="itemIndex">
                <slot :item="item" :itemIndex="itemIndex"></slot>
            </template>
        </view>
    </view>
</template>

<script>
    /**
     * waterfall 瀴布流
     * @description 这是一个瀑布流形式的组件，对原组件进行升级已经支持自定义列数模式，便于适配不同屏幕。搭配loadMore 加载更多组件，让您开箱即用，眼前一亮。
     * @tutorial https://uview-plus.jiangruyi.com/components/waterfall.html
     * @property {Array} flow-list 用于渲染的数据
     * @property {String Number} add-time 单条数据添加到队列的时间间隔，单位ms，见上方注意事项说明（默认200）
     * @property {String Number} columns 瀑布流列数，默认为2，设置为auto时自动根据屏幕宽度调整列数
     * @example <u-waterfall :flowList="flowList"></u-waterfall>
     */
    import { mpMixin } from '../../libs/mixin/mpMixin';
	import { mixin } from '../../libs/mixin/mixin';
    import { sleep } from '../../libs/function/index';
    export default {
        name: "u-waterfall",
        props: {
            // #ifdef VUE2
            value: {
                // 瀑布流数据
                type: Array,
                required: true,
                default: function() {
                    return [];
                }
            },
            // #endif
            // #ifdef VUE3
            modelValue: {
                // 瀑布流数据
                type: Array,
                required: true,
                default: function() {
                    return [];
                }
            },
            // #endif
            // 每次向结构插入数据的时间间隔，单位ms
            // 单位ms
            addTime: {
                type: [Number, String],
                default: 200
            },
            // id值，用于清除某一条数据时，根据此idKey名称找到并移除，如数据为{idx: 22, name: 'lisa'}
            // 那么该把idKey设置为idx
            idKey: {
                type: String,
                default: 'id'
            },
            // 瀑布流列数
            columns: {
                type: [Number, String],
                default: 2
            },
            // 瀑布流最小列数
            columnsMin: {
                type: [Number, String],
                default: 2
            },
            // 最小列宽
            minColumnWidth: {
                type: Number,
                default: 230
            }
        },
        mixins: [mpMixin, mixin],
        data() {
            return {
                columnList: [[]], // 存储每列的数据
                children: [],
                // 用于标记是否已经初始化
                initialized: false,
                windowWidth: 375,
                windowHeight: 0
            }
        },
        watch: {
            copyFlowList: {
                handler(nVal, oVal) {
                    if (!nVal || nVal.length == 0) {
                        this.clear(false);
                    } else {
                        if (this.columnList.length == 1) {
                            this.initColumnList()
                        }
                        // 取差值，即这一次数组变化新增的部分
                        let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
                        // 直接处理数据，不再使用tempList和splitData
                        this.handleData(nVal.slice(startIndex));
                    }
                },
                immediate: true
            },
            columns: {
                handler() {
                    this.initColumnList();
                    // 重新分配数据
                    if (this.copyFlowList.length > 0) {
                        this.redistributeData();
                    }
                },
                immediate: false
            }
        },
        created() { 
            this.initColumnList();
        },
        mounted() {
            this.initialized = true;
            // 添加窗口大小变化监听
            // #ifdef H5
            if (this.columns === 'auto') {
                uni.onWindowResize(this.handleWindowResize);
            }
            // #endif
        },
        // 添加beforeUnmount生命周期清理事件监听
        // #ifdef VUE3
        beforeUnmount() {
            // #ifdef H5
            if (this.columns === 'auto') {
                uni.offWindowResize(this.handleWindowResize);
            }
            // #endif
        },
        // #endif
        // #ifdef VUE2
        beforeDestroy() {
            // #ifdef H5
            if (this.columns === 'auto') {
                window.removeEventListener('resize', this.handleWindowResize);
            }
            // #endif
        },
        // #endif
        computed: {
            // 破坏flowList变量的引用，否则watch的结果新旧值是一样的
            copyFlowList() {
                // #ifdef VUE3
                if (!this.modelValue || this.modelValue.length == 0) {
                    // console.log('clear');
                    return [];
                } else {
                    return this.cloneData(this.modelValue);
                }
                // #endif
                // #ifdef VUE2
                return this.cloneData(this.value);
                // #endif
            }
        },
        emits: ['update:modelValue', 'after-add-one', 'after-add-all'],
        methods: {
            // 初始化列数据数组
            initColumnList() {
                this.windowWidth = uni.getSystemInfoSync().windowWidth;
                const cols = this.getColumnsCount();
                // console.log(cols)
                this.columnList = Array.from({ length: cols }, () => []);
            },
            
            // 获取列数，支持auto模式
            getColumnsCount() {
                if (this.columns === 'auto') {
                    // 列间距为10rpx(约等于7px)
                    const columnGap = 7;
                    // 计算可容纳的列数
                    let columnCount = Math.max(1, Math.floor(this.windowWidth / (this.minColumnWidth + columnGap)));
                    if (columnCount < this.columnsMin) {
                        columnCount = this.columnsMin
                    }
                    return columnCount;
                }
                return parseInt(this.columns) || 2;
            },
            
            // 窗口大小变化处理函数
            handleWindowResize(res) {
                this.windowWidth = res.size.windowWidth
                this.windowHeight = res.size.windowHeight
                // 防抖处理，避免频繁触发
                if (this.resizeTimer) {
                    clearTimeout(this.resizeTimer);
                }
                this.resizeTimer = setTimeout(() => {
                    const newColumnsCount = this.getColumnsCount();
                    const oldColumnsCount = this.columnList.length;
                    
                    // 只有列数发生变化时才重新分配数据
                    if (newColumnsCount !== oldColumnsCount) {
                        this.redistributeData();
                    }
                }, 300);
            },
            
            // 重新分配所有数据
            async redistributeData() {
                // 清空所有列
                this.initColumnList();
                // 保存所有数据
                const allData = this.cloneData(this.copyFlowList);
                // 重新分配数据
                this.handleData(allData);
            },
            
            // 处理新增数据
            async handleData(newData) {
                if (!newData || newData.length === 0) return;
                
                // 初始化列高度数组
                const columnHeights = new Array(this.columnList.length).fill(0);
                
                // 获取各列当前高度
                for (let i = 0; i < this.columnList.length; i++) {
                    try {
                        const rect = await this.$uGetRect(`#u-column-${i}`);
                        // console.log(`#u-column-${i}`, rect.height)
                        columnHeights[i] = rect.height || 0;
                    } catch (e) {
                        columnHeights[i] = 0;
                    }
                }
                
                // 分配新数据到最短的列
                for (let item of newData) {
                    const minHeightIndex = columnHeights.indexOf(Math.min(...columnHeights));
                    // console.log('this.columnList', this.columnList)
                    this.columnList[minHeightIndex].push(item);
                    
                    // 获取实际渲染后的元素高度而不是估算
                    await sleep(this.addTime)
                    await this.$nextTick(async () => {
                        try {
                            const rect = await this.$uGetRect(`#u-column-${minHeightIndex}`);
                            // console.log(`#u-column-${minHeightIndex}`, rect.height)
                            if (rect.height) {
                                columnHeights[minHeightIndex] = rect.height;
                                // 加载一个后置事件
                                this.$emit('after-add-one', {
                                    ...item,
                                    height: rect.height
                                });
                            }
                        } catch (e) {
                            // console.log(e)
                            // columnHeights[i] = 0;
                        }
                    });
                    // this.$nextTick(async () => {
                    //     try {
                    //         // 等待DOM更新后获取实际高度
                    //         const lastIndex = this.columnList[minHeightIndex].length - 1;
                    //         const el = this.$refs[`u-column-${minHeightIndex}`][0].children[lastIndex];
                    //         if (el) {
                    //             const rect = await this.$uGetRect(el);
                    //             const actualHeight = rect.height || 100;
                    //             columnHeights[minHeightIndex] += actualHeight;
                    //         } else {
                    //             // 备用方案：如果无法获取实际高度，则使用默认值
                    //             columnHeights[minHeightIndex] += 100;
                    //         }
                    //     } catch (e) {
                    //         // 出错时使用默认高度
                    //         console.log(e)
                    //         columnHeights[minHeightIndex] += 100;
                    //     }
                    // });
                }
                // 加载所有后置事件
                this.$emit('after-add-all', {
                    columnHeights: columnHeights,
                    newData: newData
                });
            },

            // 复制而不是引用对象和数组
            cloneData(data) {
                return JSON.parse(JSON.stringify(data));
            },
            
            // 清空数据列表
            clear(bak = true) {
                this.initColumnList();
                // 同时清除父组件列表中的数据
                if (bak) {
                    // #ifdef VUE2
                    this.$emit('input', []);
                    // #endif
                    // #ifdef VUE3
                    this.$emit('update:modelValue', []);
                    // #endif
                }
            },
            
            // 清除某一条指定的数据，根据id实现
            remove(id) {
                // 遍历所有列查找并删除数据
                for (let i = 0; i < this.columnList.length; i++) {
                    const index = this.columnList[i].findIndex(val => val[this.idKey] == id);
                    if (index !== -1) {
                        this.columnList[i].splice(index, 1);
                        break;
                    }
                }
                
                // 同时清除父组件的数据中的对应id的条目
                // #ifdef VUE2
                const valueIndex = this.value.findIndex(val => val[this.idKey] == id);
                if (valueIndex !== -1) {
                    const newValue = this.cloneData(this.value);
                    newValue.splice(valueIndex, 1);
                    this.$emit('input', newValue);
                }
                // #endif
                // #ifdef VUE3
                const modelValueIndex = this.modelValue.findIndex(val => val[this.idKey] == id);
                if (modelValueIndex !== -1) {
                    const newModelValue = this.cloneData(this.modelValue);
                    newModelValue.splice(modelValueIndex, 1);
                    this.$emit('update:modelValue', newModelValue);
                }
                // #endif
            },
            
            // 修改某条数据的某个属性
            modify(id, key, value) {
                let found = false;
                let targetItem = null;
                
                // 在所有列中查找数据
                for (let i = 0; i < this.columnList.length; i++) {
                    const index = this.columnList[i].findIndex(val => val[this.idKey] == id);
                    if (index !== -1) {
                        // 修改对应key的值
                        this.columnList[i][index][key] = value;
                        targetItem = this.columnList[i][index];
                        found = true;
                        break;
                    }
                }
                
                if (found && targetItem) {
                    // 修改父组件的数据中的对应id的条目
                    // #ifdef VUE2
                    const valueIndex = this.value.findIndex(val => val[this.idKey] == id);
                    if (valueIndex !== -1) {
                        let data = this.cloneData(this.value);
                        data[valueIndex][key] = value;
                        this.$emit('input', data);
                    }
                    // #endif
                    // #ifdef VUE3
                    const modelValueIndex = this.modelValue.findIndex(val => val[this.idKey] == id);
                    if (modelValueIndex !== -1) {
                        let data = this.cloneData(this.modelValue);
                        data[modelValueIndex][key] = value;
                        this.$emit('update:modelValue', data);
                    }
                    // #endif
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .u-waterfall {
        @include flex;
        flex-direction: row;
        align-items: flex-start;
    }

    .u-column {
        @include flex;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
        /* #ifndef APP-NVUE */
        height: 100%;
        /* #endif */
        // 添加列之间的间距
        &:not(:first-child) {
            margin-left: 10rpx;
        }
    }

    .u-image {
        /* #ifndef APP-NVUE */
        max-width: 100%;
        /* #endif */
    }
</style>