zengxiangfu/vue2-waterfall

瀑布流组件

Waterfall

瀑布流组件

使用指南

import { Waterfall } from "waterfall-vue2";
Vue.use(Waterfall);

代码演示

基础用法

<Waterfall
  :pageData="pageData"
  :columnCount="2"
  :colStyle="{display:'flex',flexDirection:'column',alignItems:'center'}"
  query-sign="#cardItem"
  @wfLoad="onLoad"
  @ObserveDataTotal="ObserveDataTotal"
>
  <template #default="{ item, columnIndex, index}">
    <!--  slot 内容  good-card：事例组件 -->
    <good-card :item="item" id="cardItem" />
  </template>
</Waterfall>

export default {
  name: 'waterfall-demo',
  data() {
    return {
      pageData: []
    };
  },
  methods: {
    onLoad() {
        // 数据请求
        const data = request(....)
        // 当前页的数据
        this.pageData =data;
    },
     ObserveDataTotal(length) {
      console.log(length);
    }
  }
}

API

参数	说明	类型	默认值	版本
columnCount	列数	Number	2	-
pageData	当前 pageIndex 请求的数据（非多页累加数据）	Array	[]	-
resetSign	重置数据（清空每列数据）	Boolean	false	-
immediateCheck	立即检查	Boolean	true	-
offset	触发加载的距离阈值，单位为px	String｜Number	300	-
colStyle	每列的样式	Object	{}	-
querySign	内容标识（querySelectorAll选择器）	String	必须项	-

Event

事件名	说明	参数
wfLoad	滚动条与底部距离小于 offset 时触发	-
ObserveDataTotal	未渲染的数据总数	length

Slot

名称	说明
default	插槽内容
columnIndex	当前内容所在的列
item	单条数据
index	当前数据所在列的下标

源码地址

源码地址请参见 github

vue2-waterfall's Issues

关于数据结构问题。

传入的pageData希望能够知道具体的数据结构是什么样的
因为现在使用遇到点问题。好像我的列表传入后无法使用。

传入的数据格式如下：

      pageData: [
        "https://xxx/aa?id=1",
        "https://xxx/aa?id=1",
        "https://xxx/aa?id=1",
      ],

不支持动态修改瀑布流数据？

例如我的瀑布流带有筛选项，筛选之后会有新的list传给pageData，现在不支持重新渲染

多次触发滚到底部请求

有bug，显示到最后的时候，某些列会空白，见图