更新记录

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

组件初始化

平台兼容性

瀑布流组件 waterfall

组件介绍

一个基于uniapp的瀑布流组件，支持图片（头像）、摘要信息、多样式标签和底部标注文字等的展示。提供灵活的属性配置，方便快捷。较完善的注释，方便各位开发者可按需修改。源码较简单，导入【示例项目】即可直接运行查看效果。

属性

事件

友情提示

1. 项目源码使用了 scss ，请添加运行依赖。

使用方式

示例：

<waterfall 
    ref="wfList" 
    :list="wfList"
    :contentLineAlign="true"
    imagePlaceholder="/static/logo.png"
    @clickItem="clickItem"
></waterfall>

组件的item绑定的字段名见下面的 wfList

import waterfall from '@/components/zyw-waterfall/waterfall.vue'

export default {
        components: {
            waterfall
        },
        data() {
            return {
                wfList: [
                    {
                        coverImage: '/static/imgs/zhangsan.jpg',
                        infoTitle: '张三',
                        infoAbstract:'通过张三这个虚构角色的行为，帮助人们更好地理解法律条文和司法实践。经常以“张三”作为加害人的例子，张三在故事',
                        tagInfo: '法外狂徒',
                        tagType: 'primary',
                        bottomInfo: 'xxx律师事务所'
                    },
                    {
                        coverImage: '/static/imgs/daitu.jpg',
                        infoTitle: '带土',
                        infoAbstract:'带土的命运转折点在于他年轻时的任务失败，好友野原琳的牺牲让他深受触动，从此他的内心世界发生了巨大变化，',
                        tagInfo: '火影忍者',
                        bottomInfo: '宇智波家族一员'
                    },
                    {
                        coverImage: '/static/imgs/daitu1.jpg',
                        infoTitle: '阿飞',
                        infoAbstract:'全名宇智波带土，他不仅是晓组织的首领，还扮演了多个身份，包括假面男和涡卷白绝。阿飞最初以假面男的身份出现，',
                        tagInfo: '火影忍者',
                        tagType: 'success',
                        tagInverted: true,
                        tagCircle: true,
                        bottomInfo: '晓组织'
                    },
                    {
                        coverImage: '/static/imgs/gangshou.jpg',
                        infoTitle: '纲手',
                        infoAbstract:'第五代火影，也是传说中的“三忍”之一。她是初代火影千手柱间和漩涡水户的孙女（或外孙女），擅长体术和医疗忍术。',
                        tagInfo: '火影忍者',
                        tagCustomStyle:"background-color: #ffaaff; border-color: #4335d6; color: #fff;",
                        bottomInfo: '木叶村'
                    },
                    {
                        coverImage: '/static/imgs/xiaochou.jpg',
                        infoTitle: '小丑',
                        infoAbstract:'马戏团里你最忙，哥谭市里你最狂，麦当劳前你站岗，扑克牌中大小王',
                        tagInfo: '小丑竟是我自己',
                        // tagType: 'warning',
                        tagMark: true,
                        bottomInfo: '家门口的马戏团'
                    },
                    {
                        coverImage: undefined,
                        infoTitle: '占位图',
                        infoAbstract:'通过张三这个虚构角色的行为，帮助人们更好地理解法律条文和司法实践。经常以“张三',
                        tagInfo: '占位图',
                        bottomInfo: 'xxx律师事务所',
                        tagDisabled: true
                    }
                ]
            }
        },

    }