更新记录

1.0.0(2024-11-28) 下载此版本

v1.0.0 第一次发布


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

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
}

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问