vue使用vue-waterfall2实现瀑布流

效果如下

GIF.gif
1.安装插件
文档地址：https://github.com/AwesomeDevin/vue-waterfall2/blob/master/CHINESE-README.md

npm i vue-waterfall2@latest --save

2.引用

import waterfall from 'vue-waterfall2';
Vue.use(waterfall);

3.html代码

    <waterfall
        :col="2"
        :data="data"
        @loadmore="loadmore"
    >
        <template>
            <div
                class="cell-item"
                v-for="(item,index) in data"
                :key="index"
            >
                <div class="max-img">
                    <img
                        class="cell-item-img"
                        v-if="item.cover_img"
                        :src="item.cover_img"
                        @click="goDetail(item)"
                    >
                </div>
                <div
                    class="goods-list"
                    @click="goDetail(item)"
                >
                    <div class="con-r-title">{{item.name}}</div>
                    <div class="con-r-price">{{item.price}}</div>
                </div>
            </div>
        </template>
    </waterfall>

4.ts代码

isbottom: any = false;//判断是否已经到底了
page: any = 1;//页码
per_page: any = 5;//每页加载几个
data: any = [];//数据
loadmore() {//滚动到底部触发
        if (this.isbottom) {
            return false;
        }
        let page = this.page;
        this.page += 1;
        this.getMorelist(page + 1);
}
mounted() {
        this.getMorelist(1);
}
//获取数据
getMorelist(page) {
        let pram: any = {
            page,
            per_page: this.per_page,
        };
        this.mixGet(`url`, pram).then(res => {
            if (res.data.data.length <= 0) {
                this.isbottom = true;
            }
            let morelist = res.data.data;
            this.data = this.data.concat(morelist);
        });
}