更新记录
1.0.31(2025-02-12) 下载此版本
优化
1.0.3(2025-02-12) 下载此版本
修复vue2问题
1.0.2(2025-02-05) 下载此版本
修复数据少于4个时报错
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | × | - | - | √ | - | - | - |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
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>