更新记录

1.3.0（2024-12-06） 下载此版本

效果优化

1.2.0（2024-03-13） 下载此版本

新增参数

1.1.0（2024-03-13） 下载此版本

优化瀑布流

平台兼容性

uni-app

其他

支持扫码体验-见右侧二维码

<template>
    <view class="waterfall-content">
        <waterfall-lazy-image :column="column" :columnMarginTop="columnMarginTop" :columnWidth="columnWidth"
            style="width: 100%;" :selectList="selectList" :list="photoList" :isRefreshList="isRefreshList"
            @imageClick="handleImageClick">
        </waterfall-lazy-image>
        <view class="more" @click="getPage">
            点击加载更多
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                column: 3,
                columnMarginTop: 15,
                columnWidth: 230,
                photoList: [],
                selectList: [],
                isRefreshList: false,
            };
        },
        onLoad(options) {
            this.getPage()
        },
        /**
         * 滚动加载更多
         */
        onReachBottom() {
            if (this.hasMore && !this.isLoading) {
                this.pageIndex++
                //this.getPage();
            }
        },
        methods: {
            /**
             * 分页获取
             */
            getPage() {
                this.$nextTick(() => {
                    this.photoList = [{
                            "_id": '1',
                            "title": "我是标题",
                            "fileCompressID": "https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/428a3760-7047-4e1d-9f90-7652cffda10c.jpeg",
                            // "height": 2688,  //width和height传了会按传了的处理
                            // "width": 1536
                        },
                        {
                            "_id": '2',
                            "title": "我是标题",
                            "fileCompressID": "https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/6bfa94e2-27c9-4514-ab6f-2d314015af8b.jpeg",
                            // "height": 642,
                            // "width": 321
                        },
                        {
                            "_id": '3',
                            "title": "我是标题",
                            "fileCompressID": "https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/2f8a5af9-ad19-4cb4-af29-9b45d2ca0bc0.jpg",
                            // "height": 228,
                            // "width": 136
                        },
                        {
                            "_id": '4',
                            "title": "我是标题",
                            "fileCompressID": "https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/7ffbf6d6-b818-48e6-b0a8-0b9e6116bd17.jpeg",
                            // "height": 2688,
                            // "width": 1536
                        },
                        {
                            "_id": "5",
                            "title": "我是标题",
                            "fileCompressID": "https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/VKCEYUGU-bcaa355d-ec14-4cb2-a10e-482127e7cb48/1dd47d58-9282-4a7d-b553-35d601a01015.jpg",
                            // "height": 222,
                            // "width": 1536
                        }
                    ]
                })
            },
            /**
             * 点击图片回调
             */
            handleImageClick(item) {
                console.log(item);
            },
            /**
             * 更新页面数据
             */
            refreshPage() {
                this.isRefreshList = !this.isRefreshList
            },
        },
    }
</script>
<style>
    .waterfall-content {
        padding-top: 15rpx;
        width: 720rpx;
        margin: 0 auto;
    }

    .more {
        color: rgba(0, 0, 0, 0.8);
        font-size: 28rpx;
        text-align: center;
        padding-bottom: 24rpx;
    }
</style>