更新记录

1.0.0（2024-11-28） 下载此版本

v1.0.0 第一次发布

平台兼容性

uni-app

miran-waterfall 使用示例

<miran-waterfall ref="waterfall" :addTime="100" v-model="list" @changeList="changeList" idKey="_id">
    <template #list1>
        <view v-for="(item, index) in list1 || []" :key="'list1'+index">
            <waterfall-item :item="item" @onclick="toDetail" />
        </view>
    </template>
    <template #list2>
        <view v-for="(item, index) in list2 || []" :key="'list2'+index">
            <waterfall-item :item="item" @onclick="toDetail" />
        </view>
    </template>
</miran-waterfall>

export default {
        name: "waterfall",
        props: {
            dataList: {
                type: Array,
                require: true,
                default: () => {
                    return []
                }
            }
        },
        watch: {
            dataList: {
                handler(nVal) {
                    this.list = JSON.parse(JSON.stringify(nVal));
                },
                deep: true
            }
        },
        data() {
            return {
                list: [],
                list1: [],
                list2: []
            }
        },
        methods: {
            /**
             * 清空瀑布流
             */
            clearList() {
                this.list = [];
                this.list1 = [];
                this.list2 = [];
                this.$refs.waterfall.clear();
            },
            /**
             * 重要 手动添加项
             * @param {Object} e
             */
            changeList(e) {
                this[e.name].push(e.value);
            },
            /**
             * 跳转到页面
             * @param {Object} url
             */
            toDetail: function(id) {
                uni.navigateTo({
                    url: ``
                })
            }
        }
    }

item的数据格式，waterfall-item支持solt，可自定义显示，详细操作自已看代码

item :{
title,
subtitle,
imageUrl
}