更新记录

1.0.0（2024-07-05） 下载此版本

第一次跟新

平台兼容性

<template>
    <view>
        <waterfall-flow ref="waterfallFlow" offset="10rpx" :list="list" @load="waterfallFlowLoad">
            <template v-slot:left="{leftList}">
                <view class="item-warter" v-for="(item, index) in leftList" :key="index" @click="e => clickItem(item)">
                    <image mode="widthFix" :src="item.url" :lazy-load="true"></image>
                    <view class="text-break-all">{{ item.title }}</view>
                </view>
            </template>
            <template v-slot:right="{rightList}">
                <view class="item-warter" v-for="(item, index) in rightList" :key="index" @click="e => clickItem(item)">
                    <image mode="widthFix" :src="item.url" :lazy-load="true"></image>
                    <view class="text-break-all">{{ item.title }}</view>
                </view>
            </template>
        </waterfall-flow>
    </view>
</template>

<script>
import waterfallFlow from '@/components/waterfall-flow.vue';

export default {
    components: {
        waterfallFlow
    },
    data() {
        return {
            list: [],
            count: 0
        }
    },
    onLoad() {
        this.getList();
    },
    methods: {
        // 获取数据
        getList() {
            const tem = [];
            for (let i = 0; i < 10; i++) {
                this.count++
                const height = this.randomAccess(200, 600);
                const url = require(`static/${i%2+1}.jpg`)
                const title = this.getRandomName(height / 2 / 2 / 2,i);
                tem.push({ url, title, id: this.count });
            };
            this.list = this.list.concat(tem);
        },
        // 生成一定范围内的随机数
        randomAccess(min, max) {
            return Math.floor(Math.random() * (min - max) + max)
        },

        // 随机生成汉字
        getRandomName(NameLength,i) {
            let name = "";
            if(i % 2 === 0){
                name='阳光灼热，数不尽夏日繁华；蝉鸣幽幽，道不完苦辣酸甜。阳光灼热，数不尽夏日繁华；蝉鸣幽幽，道不完苦辣酸甜。 ---危险同居人-'
            }else{
                name ='找一颗属于你自己的星星吧，它会给你指引方向，一直到天明。 ---凯蒂·克劳泽-'
            }

            return name;
        },
        // 元素项被点击
        clickItem(item) {
            // 可做页面跳转等
            console.log("点击了：", item);
        },
        // 瀑布流列表渲染完毕
        waterfallFlowLoad(event) {
            console.log("渲染完成：", event);
        }
    },
    // 页面触底事件，加载下一页
    onReachBottom() {
        this.getList();
    },
    // 下拉刷新
    onPullDownRefresh() {
        this.list = [];

        this.$refs.waterfallFlow.clear();

        setTimeout(() => {
            this.getList();
            uni.stopPullDownRefresh();
        }, 500);
    }
}
</script>

<style>
page {
    background-color: #f8f8f8;
}
</style>
<style scoped>
.item-warter {
    width: 100%;
    height: auto;
    background-color: #fff;
    border-radius: 10rpx;
    overflow: hidden;
    border: 1px solid #e3e3e3;
}

.item-warter:nth-child(n+2) {
    margin-top: 10rpx;
}

.item-warter image {
    width: 100%;

}

.text-break-all {
    word-break: break-all;
    padding: 12rpx;
}
</style>