更新记录

1.0.9（2021-01-19） 下载此版本

修复 因设备性能不佳，导致list数据改变后同时调用reloadList函数导致数据错乱，已做节流处理

1.0.8（2021-01-09） 下载此版本

修复 分页数据

1.0.7（2021-01-09） 下载此版本

1、兼容小程序写法

平台兼容性

r-waterfall-flow简介

插件名：r-waterfall-flow
插件说明：瀑布流，实现方式简单粗暴，支持所有uniapp所有平台，你只需要在原有列表添加4行代码，啥？4行代码？你没听错，就是4行，震惊你的眼球！

r-waterfall-flow兼容性

支持所有uniapp所有平台!

请忽略右侧没有排版的丑图，重点是结构！

使用方式

在template中引入组件

<r-waterfall-flow ref="rWaterfallFlow" :list="list" :column="2">
    <template class="goods-item" v-slot:default="{data,index}" >
        <!-- data: list字段的每条数据 -->
        <!-- index: 下标 -->
    </template>
</r-waterfall-flow>

在script中引入组件

import rWaterfallFlow from "@/components/r-waterfall-flow/r-waterfall-flow.vue"
export default{
    components:{
        rWaterfallFlow
    },
    data(){
        return{
            list:[
                {
                    goods_name:"1康宁（World Kitchen） 空气炸锅无油",
                    goods_price:2000,
                    goods_img:require("@/static/logo.png")
                },
                {
                    goods_name:"2康佳（KONKA）KC-V5 扫地机器人 家用 全自动 扫地机 无线智能 清洁 吸尘器",
                    goods_price:2000,
                    goods_img:require("@/static/logo.png")
                },
                {
                    goods_name:"3我商品名称比较短",
                    goods_price:2000,
                    goods_img:require("@/static/logo.png")
                },
                {
                    goods_name:"4我是商品名称我是商品名称我是商品名称我是商品名称我是商品名称我是商品名称我是商品名称我是商品名称",
                    goods_price:2000,
                    goods_img:require("@/static/logo.png")
                },
                {
                    goods_name:"5我商品名称比较短",
                    goods_price:2000,
                    goods_img:require("@/static/logo.png")
                },
                {
                    goods_name:"6我商品名称比较短",
                    goods_price:2000,
                    goods_img:require("@/static/logo.png")
                }
            ]
        }
    }
}

r-waterfall-flow

瀑布流。

属性说明

方法说明

<!-- 调用示例 -->
this.$refs.rWaterfallFlow.reLoadList()
<!-- 调用示例 -->
this.$refs.rWaterfallFlow.resetList()

学习交流微信