更新记录

1.0.31（2025-02-12） 下载此版本

优化

1.0.3（2025-02-12） 下载此版本

修复vue2问题

1.0.2（2025-02-05） 下载此版本

修复数据少于4个时报错

查看更多

平台兼容性

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

BJL-waterfall 使用文档

组件介绍

轻量级简单易用的瀑布流组件，支持上拉加载，在移动端中自适应显示两列，在平板、iPad中自带显示三列；

使用插槽自定义自己的item子元素样式和显示的数据

属性说明

属性名 类型 默认值 说明
data Array 数据
columnCount Number 2 瀑布流列数
gap String 10rpx 瀑布流列间距
bgColor String #eee 背景颜色
height String 100vh 容器高度
padding String 20rpx 容器内边距
columnKey 已废弃 String id 数据中key值(防止刷新或懒加载不渲染问题)
styleData 已废弃 Object 自定义父元素样式
scrollHeight 已废弃 注：替换成 height String 100vh 控制整体高度
@clickItem function 子元素的点击事件
@scrolltolower function 上拉加载事件

插槽

属性名 属性值 用法 说明
#scrollItem 具名插槽 <template #scrollItem > 自定义item样式与内容
#bottom 具名插槽 <template #bottom > 自定义底部样式与内容

示例

<template>
    <view>
        <BJL-waterfall :data="dataArr" @clickItem='clickItem' @scrolltolower='scrolltolower' :styleData="styleData">
            <template #scrollItem="{item,index}">
                <view class="card">
                    <view class="cover-cl-box">
                        <image class="cover-cl" :src="item.cover" mode="widthFix"></image>
                    </view>
                    <view class="txt-box">
                        <view class="txt-h">{{item.title}}</view>
                       <view class="txt-name">
                            <view class="name">
                                <image class="avatar" :src="item.avatar" mode="scaleToFill"></image>
                                <view class="name-n">{{item.name}}</view>
                            </view>
                            <view class="dz">{{index}}w+</view>
                        </view>
                    </view>
                </view>
            </template>
            <template #bottom>
                <view class="food-cl">加载更多...</view>
            </template>
        </BJL-waterfall>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                dataArr: [ {
                    "title": "深夜激情下单xm5 ",
                    "name": "悲惨修狗",
                    "cover": "https://sns-webpic-qc.xhscdn.com/202502111446/94748ac86d6ed50dcae7b798aa485d6e/1040g00830n18v5e356005ov3lsu9gqt753ctvgo!nc_n_webp_mw_1",
                    "avatar": "https://sns-avatar-qc.xhscdn.com/avatar/62e8b6f7a31e6e6f8f2ded0e.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip",
                                      'id':1
                }, {
                    "title": "坚持喝醪糟后的身体变化……",
                    "name": "柠檬味的YOU",
                    "cover": "https://sns-webpic-qc.xhscdn.com/202502111446/4b3279b9df15732eb0781e4508802369/1000g0082370c4eafi0005o8jjmao5f7gl5039c0!nc_n_webp_mw_1",
                    "avatar": "https://sns-avatar-qc.xhscdn.com/avatar/5f0294c60000000001003da3.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip",
                                      'id':2
                }, {
                    "title": "家人们，有四川南充的老乡吗？",
                    "name": "雾漫漫",
                    "cover": "https://sns-webpic-qc.xhscdn.com/202502111446/1699c73a20d585e72985c4b2017677a7/1000g0082o05bhh6k80005ou007r9i7hib99cgfg!nc_n_webp_mw_1",
                    "avatar": "https://sns-avatar-qc.xhscdn.com/avatar/6615c426bc78deddd5c7bfde.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip",
                                      'id':3
                }, {
                    "title": "大自然馈赠的520礼物",
                    "name": "如花",
                    "cover": "https://sns-webpic-qc.xhscdn.com/202405280915/d97c9397d9de51d41363d23a66ecee67/1040g2sg3130lkvdi70705o4t2v5gbq1cau6s5o0!nc_n_webp_mw_1",
                    "avatar": "https://sns-avatar-qc.xhscdn.com/avatar/60e45e2ae1756da8b89d9d2e.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip",
                                      'id':4
                }, {
                    "title": "成都外国语学院 ",
                    "name": "小红薯6553CAD0",
                    "cover": "https://sns-webpic-qc.xhscdn.com/202502111448/03d91080faf0e0f3b8ba73cd653dbf93/1040g00831clkmvv4gs005n9li1q4djup7bcf6p8!nc_n_webp_mw_1",
                    "avatar": "https://sns-avatar-qc.xhscdn.com/avatar/645b7f8f2a34639eb26eb1cd.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip",
                                      'id':5
                }, {
                    "title": "A&F成都IFS店即将闭店，新店搬去太古里。",
                    "name": "成都城CDC",
                    "cover": "https://sns-webpic-qc.xhscdn.com/202502111448/6da7ff197bd3b03b332274aeb51553f1/1040g2sg31ca3772u0s7049l8q96ah59qnokdep0!nc_n_webp_mw_1",
                    "avatar": "https://sns-avatar-qc.xhscdn.com/avatar/6191ac1f398ce2a38624d5db.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip",
                                      'id':6
                }],
                styleData: {
                    backgroundColor: '#e7e7e7'
                }
            };
        },
        methods: {
            clickItem(item) {
                console.log('子元素点击事件', item);
            },
            scrolltolower() {
                console.log('模拟接口分页拉取数据-----到底了！');
                const result = [];
                const numToPick = 4;
                while(result.length < numToPick){
                    const randomIndex = Math.floor(Math.random() * this.dataArr.length);
                    const randomObject = this.dataArr[randomIndex];

                    if(!result.includes(randomObject)){
                        result.push(randomObject);
                    }
                }
                setTimeout(()=>{
                    this.dataArr.push(...result)
                    result.length=0
                },1500)

            }
        }
    }
</script>

<style lang="scss">
    .card {
        background-color: white;
        margin-bottom: 20rpx;
        overflow: hidden;
        border-radius: 20rpx;
    }

    .cover-cl-box {
        width: 100%;
        max-height: 500rpx;
        overflow: hidden;
        border-radius: 20rpx;
    }

    .cover-cl {
        width: 100%;
        border-radius: 20rpx;
        display: block;
    }

    .txt-box {
        width: 100%;
        padding: 10%;
        padding-bottom: 5%;
        color: #333;
        box-sizing: border-box;

        .txt-h {
            font-size: smaller;
            line-height: 150%;
            margin-bottom: 16rpx;
        }

        .txt-name {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .name {
                display: flex;
                align-items: center;
                flex-shrink: 0;
                flex-grow: 0;

                .avatar {
                    width: 40rpx;
                    height: 40rpx;
                    border-radius: 50%;
                    margin-right: 4%;
                    flex-shrink: 0;
                }

                .name-n {
                    // width: 150rpx;
                    font-size: smaller;
                    color: #333333CC;
                    overflow: hidden; //超出隐藏
                    text-overflow: ellipsis; //文本超出时显示省略号
                    white-space: nowrap; //设置文本不换行
                }
            }

            .dz {
                width: 20%;
                color: #333333cc;
                font-size: smaller;
                flex-shrink: 0;
                flex-grow: 0;
            }
        }
    }

    .food-cl {
        width: 100%;
        text-align: center;
        color: #dbdbdb;
        padding: 15rpx 0 30rpx 0;
    }
</style>

隐私、权限声明

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

无

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

无

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

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

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

加载更多...