更新记录

1.0.2(2021-07-12)

  • 修复已知问题
  • 添加注释

1.0.1(2021-06-18)

优化只显示单列的情况。

1.0.0(2020-06-14)

1.0.0 (2020-06-14)

该组件采用了左右两个容器来布局瀑布流,而非使用绝对定位去实现,有效避免瀑布流排版失误导致页面重叠等情况。瀑布流图片可采用widthFix模式,不会因为再次加载的原因导致高度获取不精准等问题。该组件兼容了上拉刷新、触底加载等功能。

查看更多

平台兼容性

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

uniapp——瀑布流组件

该组件采用了左右两个容器来布局瀑布流,而非使用绝对定位去实现,有效避免瀑布流排版失误导致页面重叠等情况。瀑布流图片可采用widthFix模式,不会因为再次加载的原因导致高度获取不精准等问题。该组件兼容了上拉刷新、触底加载等功能。

喜欢的朋友麻烦到github给个Star:https://github.com/OUDUIDUI/uniapp_waterfalls_flow

兼容平台

H5 APP 小程序

瀑布流样式

可在WaterfallsFlowItem修改样式。

组件属性

属性名 类型 说明
wfList Array 必填,瀑布流列表
updateNum Number 默认为10,每次更新的数量
@itemTap EventHandle 点击事件,返回item整个object

使用方法

<template>
    <view class="page">
        <WaterfallsFlow :wfList='list' @itemTap="itemTap" />
    </view>
</template>

<script>
    import WaterfallsFlow from '../../components/WaterfallsFlow/WaterfallsFlow.vue'

    export default {
        components:{
            WaterfallsFlow
        },
        data() {
            return {
                list:[],
                requiredData:[]   // 存放模拟加载的数据
            }
        },
        onLoad() {
            // 模拟请求数据
            setTimeout(()=>{
                this.list = this.requiredData;
            },500)
        },
        onReachBottom(){
            // 模拟触底刷新
            setTimeout(()=>{
                this.requiredData.push(...this.list);
            },500)
        },
        onPullDownRefresh(){
            // 模拟上拉刷新
            setTimeout(()=>{
                const newList = this.requiredData.reverse();
                this.list = newList;
                uni.stopPullDownRefresh();
            },500)
        },
        methods:{
            itemTap(item){
                console.log(item);
            }
        }

    }
</script>

<style lang="scss" scoped>
    .page{
        min-height: 100vh;
        background: #eee;
    }
</style>

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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