更新记录

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模式，不会因为再次加载的原因导致高度获取不精准等问题。该组件兼容了上拉刷新、触底加载等功能。

平台兼容性

uniapp——瀑布流组件

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

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

兼容平台

H5 APP 小程序

瀑布流样式

可在WaterfallsFlowItem修改样式。

组件属性

使用方法

<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>