更新记录

1.0.1（2023-12-22）

1.修复二次渲染问题 2.新增追加数据渲染方法（分页加载）

1.0.0（2023-11-14）

v1.0.1

平台兼容性

瀑布流布局组件，列数、内容和样式可自定义，动态计算高度排列，兼容小程序、H5、app-vue

props

Event

Scoped Slot

Method

示例：

<template>
    <view class="container">
        <waterfall-flow-layout ref="waterfall-flow-layout" :data="imgList" :column="3" :margin="25" img-key="image" :item-style="setItemStyle" @click="handleClick">
            <!-- 作用域插槽 -->
            <template v-slot="{data}">
                <view class="content">
                    <view class="title">{{data.title}}</view>
                    <view class="price">￥{{data.price}}</view>
                </view>
            </template>
        </waterfall-flow-layout>
        <button @click="handleAdd">追加数据（分页加载更多）</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                //图片数据
                imgList: []
            }
        },
        computed: {
            //设置item样式
            setItemStyle() {
                return {
                    background: '#fff',
                    borderTopLeftRadius: '10rpx',
                    borderTopRightRadius: '10rpx'
                }
            }
        },
        created() {
            //模拟接口请求数据
            setTimeout(()=>{
                this.imgList=[{
                        image: 'https://xxxx',
                        title: '湖',
                        price: '30'
                    },
                    {
                        image: 'https://xxxx',
                        title: '朝霞',
                        price: '110'
                    },
                    {
                        image: 'xxxxx',
                        title: '猫',
                        price: '80'
                    },
                        {
                        image: 'https://xxxx',
                        title: '枫叶林',
                        price: '100'
                    },
                    {
                        image: 'https://xxxx',
                        title: '相机',
                        price: '120'
                    },

                ] //所有图片
            },500)
        },
        methods:{
            //点击item
            handleClick(item){
                console.log(item,'item')
            },
            //追加数据
            handleAdd(){
                const otherList= [{
                    image: 'https://img0.baidu.com/it/u=2786785992,1128165184&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
                    title: '新数据',
                    price: '100'
                }]
                //模拟接口请求
                setTimeout(()=>{
                    this.$refs['waterfall-flow-layout']&&this.$refs['waterfall-flow-layout'].concat(otherList)
                },500)
            },
        }
    }
</script>
<style>
    page {
        background-color: #f2f2f2;
    }
</style>
<style scoped>
    .container {
        padding-top: 20rpx;
        box-sizing: border-box;
    }

    .content {
        width: 100%;
        padding: 20rpx;
        box-sizing: border-box;
        font-size: 26rpx;

    }

    .price {
        margin-top: 10rpx;
        color: red;
    }
</style>