fanghuayuexuan/components/public/scs-helang-waterfall.vue

<template>
    <!--
 * @Author: jmy
 * @Date: 2026-01-09 12:02:41
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2026-01-09 15:02:20
 * @Description: helang瀑布流组件
-->
    <view class="px-12 mt-14 flex  justify-between gap-11">
        <view class="flex-1" :style="{ gap: gapValue + 'px' }" v-for="(column, columnIndex) in columnCount"
            :key="columnIndex">
            <view v-for="(item, index) in getColumnwaterfallList(columnIndex)" :key="item.id || index"
                class="w-all relative rounded-8 overflow-hidden prodoct-item mb-11">
                <slot name="special"></slot>
                <view class="w-all h-171 relative rounded-t-8 overflow-hidden">
                    <image class="w-all h-171 bg-img" :src="item.image" lazy-load @load="handleImageLoad(item.id)"
                        :class="{ 'opacity-10': isImageLoaded(item.id), 'opacity-0': !isImageLoaded(item.id) }"
                        mode="aspectFill"></image>
                    <!-- 加载中显示占位符 -->
                    <view v-if="!isImageLoaded(item.id)"
                        class="w-all h-171 absolute top-0 left-0 flex items-center justify-center bg-gray-100">
                        <text class="scroll-loading scroll-rotate"></text>
                    </view>
                </view>
                <slot name="default" :item="item"></slot>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        waterfallList: {
            type: Array,
            default: () => [
                {
                    id: 1,
                    image: 'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422',
                    title: '云南白药EGER每瓶重50g保险液每测试',
                },
                {
                    id: 2,
                    image: 'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422',
                    title: '云南白药EGER每瓶重50g保险液每测试',
                },
            ]
        },
        calcGap: {
            type: Number,
            default: 11
        },
        columnCount: {
            type: Number,
            default: 2
        }
    },
    data() {
        return {
            // 默认示例数据
            defaultwaterfallList: [

            ],
            // 图片加载状态管理
            imageLoadingStatus: {}
        }
    },
    computed: {
        gapValue() {
            return this.calcGap / this.columnCount
        }
    },
    methods: {
        // 检查图片是否已加载
        isImageLoaded(id) {
            // 特殊项（本地图片）默认已加载
            if (!id) return true;
            return this.imageLoadingStatus[id] === true;
        },

        // 处理图片加载完成事件
        handleImageLoad(id) {
            if (id) {
                this.$set(this.imageLoadingStatus, id, true);
            }
        },

        // 按列分配数据项
        getColumnwaterfallList(columnIndex) {
            const waterfallList = [];
            const columnCount = 2;

            // 将数据项分配到不同列
            this.waterfallList.forEach((item, index) => {
                if (index % columnCount === columnIndex) {
                    waterfallList.push(item);
                }
            });

            return waterfallList;
        }
    }
}
</script>

<style lang="scss" scoped></style>